css, stylelint: Set indentation to 2; reindent everything
This commit is contained in:
Garrett LeSage
Martin Pitt
parent
8eb58dbbfd
commit
c33285c2ca
|
|
@ -1,38 +1,39 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard-scss",
|
||||
"rules": {
|
||||
"declaration-colon-newline-after": null,
|
||||
"selector-list-comma-newline-after": null,
|
||||
"indentation": 2,
|
||||
|
||||
"at-rule-empty-line-before": null,
|
||||
"declaration-colon-space-before": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"custom-property-empty-line-before": null,
|
||||
"comment-empty-line-before": null,
|
||||
"scss/double-slash-comment-empty-line-before": null,
|
||||
"scss/dollar-variable-colon-space-after": null,
|
||||
"declaration-colon-newline-after": null,
|
||||
"selector-list-comma-newline-after": null,
|
||||
|
||||
"custom-property-pattern": null,
|
||||
"declaration-block-no-duplicate-properties": null,
|
||||
"declaration-block-no-redundant-longhand-properties": null,
|
||||
"declaration-block-no-shorthand-property-overrides": null,
|
||||
"declaration-block-single-line-max-declarations": null,
|
||||
"font-family-no-duplicate-names": null,
|
||||
"function-url-quotes": null,
|
||||
"indentation": null,
|
||||
"keyframes-name-pattern": null,
|
||||
"max-line-length": null,
|
||||
"no-descending-specificity": null,
|
||||
"no-duplicate-selectors": null,
|
||||
"scss/at-extend-no-missing-placeholder": null,
|
||||
"scss/at-import-partial-extension": null,
|
||||
"scss/at-mixin-pattern": null,
|
||||
"scss/comment-no-empty": null,
|
||||
"scss/dollar-variable-pattern": null,
|
||||
"scss/double-slash-comment-whitespace-inside": null,
|
||||
"scss/no-global-function-names": null,
|
||||
"scss/operator-no-unspaced": null,
|
||||
"selector-class-pattern": null,
|
||||
"selector-id-pattern": null
|
||||
"at-rule-empty-line-before": null,
|
||||
"declaration-colon-space-before": null,
|
||||
"declaration-empty-line-before": null,
|
||||
"custom-property-empty-line-before": null,
|
||||
"comment-empty-line-before": null,
|
||||
"scss/double-slash-comment-empty-line-before": null,
|
||||
"scss/dollar-variable-colon-space-after": null,
|
||||
|
||||
"custom-property-pattern": null,
|
||||
"declaration-block-no-duplicate-properties": null,
|
||||
"declaration-block-no-redundant-longhand-properties": null,
|
||||
"declaration-block-no-shorthand-property-overrides": null,
|
||||
"declaration-block-single-line-max-declarations": null,
|
||||
"font-family-no-duplicate-names": null,
|
||||
"function-url-quotes": null,
|
||||
"keyframes-name-pattern": null,
|
||||
"max-line-length": null,
|
||||
"no-descending-specificity": null,
|
||||
"no-duplicate-selectors": null,
|
||||
"scss/at-extend-no-missing-placeholder": null,
|
||||
"scss/at-import-partial-extension": null,
|
||||
"scss/at-mixin-pattern": null,
|
||||
"scss/comment-no-empty": null,
|
||||
"scss/dollar-variable-pattern": null,
|
||||
"scss/double-slash-comment-whitespace-inside": null,
|
||||
"scss/no-global-function-names": null,
|
||||
"scss/operator-no-unspaced": null,
|
||||
"selector-class-pattern": null,
|
||||
"selector-id-pattern": null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,36 +4,36 @@
|
|||
/* Application list */
|
||||
|
||||
.app-list img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
max-width: unset;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.app-list .progress-title {
|
||||
margin-right: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.app-list .pf-c-data-list__item-action button {
|
||||
min-width: 6rem;
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.app-list .pf-c-data-list__item-content {
|
||||
/* Vertically align application info to the center */
|
||||
align-items: center;
|
||||
/* Vertically align application info to the center */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Application */
|
||||
|
||||
.application-details img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.application-details .progress-title {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.app-screenshot {
|
||||
margin: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
@use "page";
|
||||
|
||||
#kdump-settings-location {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// error details
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.pf-c-modal-box__body .scroll {
|
||||
max-height: calc(75vh - 10rem);
|
||||
overflow: auto;
|
||||
max-height: calc(75vh - 10rem);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dialog-wait-ct-spinner {
|
||||
margin-left: var(--pf-global--spacer--sm);
|
||||
margin-left: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.pf-c-empty-state .pf-c-button.pf-m-primary.slim {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
@use "../../node_modules/@patternfly/patternfly/utilities/BoxShadow/box-shadow.css";
|
||||
|
||||
.pf-c-page__main-section.ct-no-bottom-padding {
|
||||
--pf-c-page__main-section--PaddingBottom: 0;
|
||||
--pf-c-page__main-section--PaddingBottom: 0;
|
||||
}
|
||||
|
||||
// <Toolbar> embedded into an <Alert>
|
||||
.pf-c-toolbar.ct-alert-toolbar {
|
||||
--pf-c-toolbar--BackgroundColor: transparent;
|
||||
--pf-c-toolbar--PaddingBottom: 0;
|
||||
--pf-c-toolbar--BackgroundColor: transparent;
|
||||
--pf-c-toolbar--PaddingBottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.alert-link.more-button {
|
||||
margin-left: var(--pf-global--spacer--sm);
|
||||
margin-left: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.notification-message {
|
||||
white-space: pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,41 +1,41 @@
|
|||
.package-list-ct {
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
max-width: 110rem;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
max-width: 110rem;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.package-list-ct li {
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
width: 22rem;
|
||||
padding: 0 1ex;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
width: 22rem;
|
||||
padding: 0 1ex;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.scale-up-ct {
|
||||
animation: dialogScaleUpCt 1s;
|
||||
animation: dialogScaleUpCt 1s;
|
||||
}
|
||||
|
||||
@keyframes dialogScaleUpCt {
|
||||
0% {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
max-height: 100vh;
|
||||
}
|
||||
50% {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,23 +3,23 @@
|
|||
flex-wrap: wrap;
|
||||
|
||||
&-actions {
|
||||
order: 2;
|
||||
flex-grow: 1;
|
||||
padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg) var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
|
||||
order: 2;
|
||||
flex-grow: 1;
|
||||
padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg) var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
&-caption {
|
||||
margin-left: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&-tabs {
|
||||
flex-grow: 1;
|
||||
order: 1;
|
||||
flex-grow: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.pf-c-tab-content {
|
||||
order: 3;
|
||||
flex-basis: 100%;
|
||||
order: 3;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
&-body {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.panel-body.empty-message {
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .panel-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .pf-c-card__header > .pf-c-card__title {
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
.automation-script-modal pre {
|
||||
max-height: 20em;
|
||||
margin-bottom: 5px;
|
||||
max-height: 20em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.automation-script-modal span.fa {
|
||||
margin-right: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.automation-script-modal i.fa {
|
||||
margin-right: 2px;
|
||||
margin-left: 5px;
|
||||
margin-right: 2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.automation-script-modal textarea {
|
||||
min-height: 15rem;
|
||||
min-height: 15rem;
|
||||
}
|
||||
|
||||
.automation-script-modal .ansible-docs-link > svg {
|
||||
padding-right: var(--pf-global--spacer--xs);
|
||||
padding-right: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
.green-icon {
|
||||
color: var(--pf-global--success-color--100);
|
||||
color: var(--pf-global--success-color--100);
|
||||
}
|
||||
|
||||
.pf-c-card.modifications-table .pf-c-card__header {
|
||||
justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.ct-password-strength-meter {
|
||||
grid-gap: var(--pf-global--spacer--xs);
|
||||
grid-gap: var(--pf-global--spacer--xs);
|
||||
|
||||
.pf-c-progress__description, .pf-c-progress__status {
|
||||
display: none;
|
||||
}
|
||||
.pf-c-progress__description, .pf-c-progress__status {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,64 +1,64 @@
|
|||
// Selected set of PF chart colors to optimize for full-spectrum and colorblindness
|
||||
// using unique part of PF name and a hex color fallback
|
||||
$plotColors: (
|
||||
blue-300 #06c,
|
||||
green-100 #bde2b9,
|
||||
cyan-200 #73c5c5,
|
||||
purple-100 #b2b0ea,
|
||||
gold-300 #f4c145,
|
||||
orange-300 #ec7a08,
|
||||
red-200 #a30000,
|
||||
cyan-300 #009596,
|
||||
black-500 #4d5258
|
||||
blue-300 #06c,
|
||||
green-100 #bde2b9,
|
||||
cyan-200 #73c5c5,
|
||||
purple-100 #b2b0ea,
|
||||
gold-300 #f4c145,
|
||||
orange-300 #ec7a08,
|
||||
red-200 #a30000,
|
||||
cyan-300 #009596,
|
||||
black-500 #4d5258
|
||||
);
|
||||
|
||||
.ct-plot {
|
||||
font-family: var(--pf-chart-global--FontFamily);
|
||||
font-family: var(--pf-chart-global--FontFamily);
|
||||
|
||||
&-border {
|
||||
stroke: var(--pf-chart-global--Fill--Color--300);
|
||||
fill: transparent;
|
||||
shape-rendering: crispedges;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: calc(var(--pf-chart-global--FontSize--md) * 1px);
|
||||
}
|
||||
|
||||
// Placeholder string to stretch the column, set offscreen
|
||||
&-widest {
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
&-axis,
|
||||
&-unit {
|
||||
font-size: calc(var(--pf-chart-global--FontSize--xs) * 1px);
|
||||
fill: var(--pf-chart-global--Fill--Color--700);
|
||||
letter-spacing: var(--pf-chart-global--letter-spacing);
|
||||
}
|
||||
|
||||
&-lines,
|
||||
&-ticks {
|
||||
stroke: var(--pf-chart-global--Fill--Color--300);
|
||||
shape-rendering: crispedges;
|
||||
}
|
||||
|
||||
&-selection {
|
||||
fill: tan;
|
||||
stroke: black;
|
||||
opacity: 0.5;
|
||||
shape-rendering: crispedges;
|
||||
}
|
||||
|
||||
&-paths {
|
||||
stroke-width: var(--pf-chart-global--stroke--Width--sm);
|
||||
shape-rendering: geometricprecision;
|
||||
|
||||
> path {
|
||||
fill: var(--ct-plot-path-color);
|
||||
stroke: var(--ct-plot-path-color);
|
||||
}
|
||||
&-border {
|
||||
stroke: var(--pf-chart-global--Fill--Color--300);
|
||||
fill: transparent;
|
||||
shape-rendering: crispedges;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: calc(var(--pf-chart-global--FontSize--md) * 1px);
|
||||
}
|
||||
|
||||
// Placeholder string to stretch the column, set offscreen
|
||||
&-widest {
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
&-axis,
|
||||
&-unit {
|
||||
font-size: calc(var(--pf-chart-global--FontSize--xs) * 1px);
|
||||
fill: var(--pf-chart-global--Fill--Color--700);
|
||||
letter-spacing: var(--pf-chart-global--letter-spacing);
|
||||
}
|
||||
|
||||
&-lines,
|
||||
&-ticks {
|
||||
stroke: var(--pf-chart-global--Fill--Color--300);
|
||||
shape-rendering: crispedges;
|
||||
}
|
||||
|
||||
&-selection {
|
||||
fill: tan;
|
||||
stroke: black;
|
||||
opacity: 0.5;
|
||||
shape-rendering: crispedges;
|
||||
}
|
||||
|
||||
&-paths {
|
||||
stroke-width: var(--pf-chart-global--stroke--Width--sm);
|
||||
shape-rendering: geometricprecision;
|
||||
|
||||
> path {
|
||||
fill: var(--ct-plot-path-color);
|
||||
stroke: var(--ct-plot-path-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$plotColorCurrent: 0;
|
||||
|
|
@ -69,17 +69,17 @@ $plotColorTotal: 0;
|
|||
|
||||
// Iterate through colors and set each graph area to a color
|
||||
@each $plotColor, $plotColorBackup in $plotColors {
|
||||
$plotColorCurrent: $plotColorCurrent + 1;
|
||||
.ct-plot-paths > path:nth-last-child(#{$plotColorTotal}n + #{$plotColorCurrent}) {
|
||||
--ct-plot-path-color: var(--pf-chart-color-#{$plotColor}, #{$plotColorBackup});
|
||||
}
|
||||
$plotColorCurrent: $plotColorCurrent + 1;
|
||||
.ct-plot-paths > path:nth-last-child(#{$plotColorTotal}n + #{$plotColorCurrent}) {
|
||||
--ct-plot-path-color: var(--pf-chart-color-#{$plotColor}, #{$plotColorBackup});
|
||||
}
|
||||
}
|
||||
|
||||
// Make plot colors available to the entire page
|
||||
:root {
|
||||
--ct-plot-color-total: #{$plotColorTotal};
|
||||
--ct-plot-color-total: #{$plotColorTotal};
|
||||
|
||||
@for $i from 1 through $plotColorTotal {
|
||||
--ct-plot-color-#{i}: #{$plotColors[$i]};
|
||||
}
|
||||
@for $i from 1 through $plotColorTotal {
|
||||
--ct-plot-color-#{i}: #{$plotColors[$i]};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,15 +3,15 @@
|
|||
}
|
||||
|
||||
.shutdown-delay-group {
|
||||
// Add spacing between rows for when the flex items wrap
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
// Add spacing between rows for when the flex items wrap
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
|
||||
.shutdown-time-picker {
|
||||
max-width: 7rem;
|
||||
}
|
||||
.shutdown-time-picker {
|
||||
max-width: 7rem;
|
||||
}
|
||||
|
||||
.shutdown-select-delay,
|
||||
.shutdown-date-picker {
|
||||
max-width: 10rem;
|
||||
}
|
||||
.shutdown-select-delay,
|
||||
.shutdown-date-picker {
|
||||
max-width: 10rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,105 +3,105 @@
|
|||
@import "@patternfly/patternfly/components/Table/table-grid.scss";
|
||||
|
||||
.ct-table {
|
||||
&.pf-m-compact {
|
||||
> thead, > tbody {
|
||||
> tr:not(.pf-c-table__expandable-row) {
|
||||
// We actually want the normal font size for our lists
|
||||
--pf-c-table-cell--FontSize: var(--pf-global--FontSize--md);
|
||||
}
|
||||
}
|
||||
&.pf-m-compact {
|
||||
> thead, > tbody {
|
||||
> tr:not(.pf-c-table__expandable-row) {
|
||||
// We actually want the normal font size for our lists
|
||||
--pf-c-table-cell--FontSize: var(--pf-global--FontSize--md);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> :only-child {
|
||||
flex: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-heading {
|
||||
// Push buttons to the right by stretching the heading
|
||||
flex: auto;
|
||||
// Add a bit of minimum margin to the right of the heading
|
||||
margin-right: var(--pf-global--spacer--md);
|
||||
// Set a minimum height of 3rem, so when buttons wrap, there's spacing
|
||||
min-height: var(--pf-global--spacer--2xl);
|
||||
// Make sure textual content is aligned to the center
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
> * {
|
||||
margin: var(--pf-global--spacer--xs) 0 var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
> :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> :only-child {
|
||||
flex: auto;
|
||||
}
|
||||
// https://github.com/patternfly/patternfly-react/issues/5379
|
||||
&-empty {
|
||||
[data-label] {
|
||||
display: revert;
|
||||
}
|
||||
|
||||
&-heading {
|
||||
// Push buttons to the right by stretching the heading
|
||||
flex: auto;
|
||||
// Add a bit of minimum margin to the right of the heading
|
||||
margin-right: var(--pf-global--spacer--md);
|
||||
// Set a minimum height of 3rem, so when buttons wrap, there's spacing
|
||||
min-height: var(--pf-global--spacer--2xl);
|
||||
// Make sure textual content is aligned to the center
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
> * {
|
||||
margin: var(--pf-global--spacer--xs) 0 var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// https://github.com/patternfly/patternfly-react/issues/5379
|
||||
&-empty {
|
||||
[data-label] {
|
||||
display: revert;
|
||||
}
|
||||
|
||||
[data-label]::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Don't wrap labels
|
||||
[data-label]::before {
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix toggle button alignment
|
||||
.pf-c-table__toggle {
|
||||
// Workaround: Chrome sometimes oddly expands the table,
|
||||
// unless a width is set. (This affects panels the most, but not only.)
|
||||
// As the width is smaller than the contents, and this is a table,
|
||||
// the cell will stay at the correct width.
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
// Properly align actions on the end
|
||||
> tbody > tr > td:last-child > .btn-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Use PF4 style headings
|
||||
> thead th {
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
font-weight: var(--pf-global--FontWeight--semi-bold);
|
||||
}
|
||||
|
||||
// Adjust the padding for nested ct-tables in ct-tables
|
||||
// FIXME: https://github.com/patternfly/patternfly/issues/4280
|
||||
.ct-table {
|
||||
td, th {
|
||||
&:first-child {
|
||||
--pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
--pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
// Don't wrap labels
|
||||
[data-label]::before {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Fix toggle button alignment
|
||||
.pf-c-table__toggle {
|
||||
// Workaround: Chrome sometimes oddly expands the table,
|
||||
// unless a width is set. (This affects panels the most, but not only.)
|
||||
// As the width is smaller than the contents, and this is a table,
|
||||
// the cell will stay at the correct width.
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
// Properly align actions on the end
|
||||
> tbody > tr > td:last-child > .btn-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Use PF4 style headings
|
||||
> thead th {
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
font-weight: var(--pf-global--FontWeight--semi-bold);
|
||||
}
|
||||
|
||||
// Adjust the padding for nested ct-tables in ct-tables
|
||||
// FIXME: https://github.com/patternfly/patternfly/issues/4280
|
||||
.ct-table {
|
||||
td, th {
|
||||
&:first-child {
|
||||
--pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
--pf-c-table--nested--first-last-child--PaddingRight: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Special handling for rows with errors
|
||||
.pf-c-table tbody tr:first-child.error {
|
||||
&, tbody.pf-m-expanded > & {
|
||||
background-color: var(--ct-color-list-critical-bg) !important; /* keep red background when expanded */
|
||||
border-top: 1px solid var(--ct-color-list-critical-border);
|
||||
border-bottom: 1px solid var(--ct-color-list-critical-border);
|
||||
}
|
||||
&, tbody.pf-m-expanded > & {
|
||||
background-color: var(--ct-color-list-critical-bg) !important; /* keep red background when expanded */
|
||||
border-top: 1px solid var(--ct-color-list-critical-border);
|
||||
border-bottom: 1px solid var(--ct-color-list-critical-border);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,63 +2,63 @@
|
|||
|
||||
/* Our terminal or logs */
|
||||
.console-ct {
|
||||
font-family: Menlo, Monaco, Consolas, monospace;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: var(--pf-global--FontSize--md);
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
font-family: Menlo, Monaco, Consolas, monospace;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: var(--pf-global--FontSize--md);
|
||||
text-align: center;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@media (min-width: 568px) {
|
||||
.console-ct {
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
.console-ct {
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
}
|
||||
|
||||
.console-ct > pre {
|
||||
text-align: left;
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
width: 48em;
|
||||
height: 310px;
|
||||
overflow-y: scroll;
|
||||
white-space: pre-wrap;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
width: 48em;
|
||||
height: 310px;
|
||||
overflow-y: scroll;
|
||||
white-space: pre-wrap;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.console-ct > .terminal {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
/* Vertically center the terminal to split the extra space between top and bottom */
|
||||
align-items: center;
|
||||
/* Add a touch of space to the left */
|
||||
padding-left: var(--pf-global--spacer--xs);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
/* Vertically center the terminal to split the extra space between top and bottom */
|
||||
align-items: center;
|
||||
/* Add a touch of space to the left */
|
||||
padding-left: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
.terminal .terminal-cursor {
|
||||
border: 1px solid var(--pf-global--palette--black-200);
|
||||
border: 1px solid var(--pf-global--palette--black-200);
|
||||
}
|
||||
|
||||
.terminal:focus .terminal-cursor {
|
||||
border: none;
|
||||
animation: blink 1s step-end infinite;
|
||||
border: none;
|
||||
animation: blink 1s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
from {
|
||||
color: var(--ct-color-text);
|
||||
background: var(--pf-global--palette--black-200);
|
||||
}
|
||||
from {
|
||||
color: var(--ct-color-text);
|
||||
background: var(--pf-global--palette--black-200);
|
||||
}
|
||||
|
||||
50% {
|
||||
color: var(--pf-global--palette--black-200);
|
||||
background: var(--ct-color-text);
|
||||
}
|
||||
50% {
|
||||
color: var(--pf-global--palette--black-200);
|
||||
background: var(--ct-color-text);
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure the console fits to its container (and doesn't attempt to go beyond the limits) */
|
||||
.xterm-screen, .xterm-viewport {
|
||||
width: auto !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
.contextMenu {
|
||||
position: fixed;
|
||||
/* xterm accessibility tree has z-index 100 and we need to be in front of it
|
||||
position: fixed;
|
||||
/* xterm accessibility tree has z-index 100 and we need to be in front of it
|
||||
* to be able to handle mouse events.
|
||||
*/
|
||||
z-index: 101;
|
||||
background: white;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
box-shadow: 0 2px 10px var(--ct-color-subtle-copy);
|
||||
z-index: 101;
|
||||
background: white;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
box-shadow: 0 2px 10px var(--ct-color-subtle-copy);
|
||||
}
|
||||
|
||||
.contextMenuOption {
|
||||
padding: 5px 15px;
|
||||
min-width: 220px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 5px 15px;
|
||||
min-width: 220px;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.contextMenuOption:hover,
|
||||
.contextMenuOption:active {
|
||||
background-color: var(--ct-color-link);
|
||||
color: white;
|
||||
background-color: var(--ct-color-link);
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,30 +2,30 @@
|
|||
|
||||
/* Rely on the margin from the Card for spacing */
|
||||
.ct-card.pf-c-card .table {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// FIXME: Once PF4 provides a property for removing padding: https://github.com/patternfly/patternfly-react/issues/5606
|
||||
.ct-card.pf-c-card .pf-c-card__body.contains-list {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
> .pf-c-table > :last-child > tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// Remove excess padding from compact tables toggles
|
||||
// And adjust the padding to left align the toggles with the card header
|
||||
> .pf-c-table {
|
||||
.pf-c-table__toggle {
|
||||
padding-left: 0;
|
||||
|
||||
> .pf-c-button {
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
> .pf-c-table > :last-child > tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// Remove excess padding from compact tables toggles
|
||||
// And adjust the padding to left align the toggles with the card header
|
||||
> .pf-c-table {
|
||||
.pf-c-table__toggle {
|
||||
padding-left: 0;
|
||||
|
||||
> .pf-c-button {
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ct-card.pf-c-card .pf-c-card__title {
|
||||
|
|
@ -39,25 +39,25 @@
|
|||
// Remove excess top padding from top-level empty state in cards,
|
||||
// as card headers already add enough space
|
||||
.ct-card > .pf-c-card__body > .pf-c-empty-state {
|
||||
--pf-c-empty-state__body--MarginTop: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: var(--pf-global--spacer--md);
|
||||
--pf-c-empty-state__body--MarginTop: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.ct-cards-grid {
|
||||
--ct-grid-columns: 2;
|
||||
--pf-l-gallery--GridTemplateColumns: repeat(var(--ct-grid-columns), 1fr);
|
||||
--ct-grid-columns: 2;
|
||||
--pf-l-gallery--GridTemplateColumns: repeat(var(--ct-grid-columns), 1fr);
|
||||
|
||||
> .pf-c-card:not(.ct-card-info) {
|
||||
// Extend all non-info cards to be full width;
|
||||
// let ct-card-info fit 1 column of the grid
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
> .pf-c-card:not(.ct-card-info) {
|
||||
// Extend all non-info cards to be full width;
|
||||
// let ct-card-info fit 1 column of the grid
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $pf-global--breakpoint--lg) {
|
||||
// Shrink to 1 column when space is constrained
|
||||
--ct-grid-columns: 1;
|
||||
}
|
||||
@media screen and (max-width: $pf-global--breakpoint--lg) {
|
||||
// Shrink to 1 column when space is constrained
|
||||
--ct-grid-columns: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove redundant padding from embedded toolbars (handled by header)
|
||||
|
|
|
|||
|
|
@ -18,142 +18,142 @@
|
|||
*/
|
||||
|
||||
.cockpit-log-panel:empty {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cockpit-log-panel {
|
||||
overflow-x: unset;
|
||||
overflow-x: unset;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .panel-body {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .pf-c-card__body .panel-heading,
|
||||
.cockpit-log-panel .panel-body .panel-heading {
|
||||
border-top: 0;
|
||||
background-color: var(--ct-color-bg);
|
||||
font-weight: var(--pf-global--FontWeight--normal);
|
||||
padding-top: var(--pf-global--spacer--sm);
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
width: auto;
|
||||
color: var(--ct-color-list-text);
|
||||
display: flex;
|
||||
border-top: 0;
|
||||
background-color: var(--ct-color-bg);
|
||||
font-weight: var(--pf-global--FontWeight--normal);
|
||||
padding-top: var(--pf-global--spacer--sm);
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
width: auto;
|
||||
color: var(--ct-color-list-text);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .pf-c-card__body .panel-heading {
|
||||
/* Align sub-heading within a PF4 card to the heading of the card */
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
/* Align sub-heading within a PF4 card to the heading of the card */
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
.cockpit-log-panel .panel-body .panel-heading:not(:first-child)::after {
|
||||
content: "\a0";
|
||||
display: block;
|
||||
flex: auto;
|
||||
background: linear-gradient(var(--ct-color-bg) 50%, var(--ct-color-border) calc(50% + 1px), var(--ct-color-bg) calc(50% + 2px));
|
||||
margin: 0 0 0 0.5rem;
|
||||
content: "\a0";
|
||||
display: block;
|
||||
flex: auto;
|
||||
background: linear-gradient(var(--ct-color-bg) 50%, var(--ct-color-border) calc(50% + 1px), var(--ct-color-bg) calc(50% + 2px));
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.cockpit-logline {
|
||||
--log-icon: 24px;
|
||||
--log-time: 3rem;
|
||||
--log-message: 1fr;
|
||||
--log-service-min: 0;
|
||||
--log-service: minmax(var(--log-service-min), max-content);
|
||||
background-color: var(--ct-color-list-bg);
|
||||
font-size: var(--font-small);
|
||||
padding: 0.5rem 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: var(--log-icon) var(--log-time) var(--log-message) var(--log-service);
|
||||
grid-gap: var(--pf-global--spacer--sm);
|
||||
align-items: baseline;
|
||||
--log-icon: 24px;
|
||||
--log-time: 3rem;
|
||||
--log-message: 1fr;
|
||||
--log-service-min: 0;
|
||||
--log-service: minmax(var(--log-service-min), max-content);
|
||||
background-color: var(--ct-color-list-bg);
|
||||
font-size: var(--font-small);
|
||||
padding: 0.5rem 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: var(--log-icon) var(--log-time) var(--log-message) var(--log-service);
|
||||
grid-gap: var(--pf-global--spacer--sm);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .cockpit-logline:hover {
|
||||
background-color: var(--ct-color-list-hover-bg);
|
||||
cursor: pointer;
|
||||
background-color: var(--ct-color-list-hover-bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .cockpit-logline:hover .cockpit-log-message:not(.cockpit-logmsg-reboot) {
|
||||
color: var(--ct-color-list-hover-text);
|
||||
text-decoration: underline;
|
||||
color: var(--ct-color-list-hover-text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .cockpit-logline + .panel-heading {
|
||||
border-top-width: 1px;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
/* Don't show headers without content */
|
||||
.cockpit-log-panel .panel-heading:last-child {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cockpit-logmsg-reboot {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cockpit-log-warning {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
width: 100%;
|
||||
color: var(--pf-global--Color--200);
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
color: var(--pf-global--Color--200);
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cockpit-log-time,
|
||||
.cockpit-log-service,
|
||||
.cockpit-log-service-reduced {
|
||||
color: var(--pf-global--Color--200);
|
||||
color: var(--pf-global--Color--200);
|
||||
}
|
||||
|
||||
.cockpit-log-time {
|
||||
color: var(--pf-global--Color--200);
|
||||
font-family: monospace;
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
justify-self: end;
|
||||
white-space: nowrap;
|
||||
color: var(--pf-global--Color--200);
|
||||
font-family: monospace;
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
justify-self: end;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cockpit-log-message,
|
||||
.cockpit-log-service,
|
||||
.cockpit-log-service-reduced {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
flex: auto;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.cockpit-log-message,
|
||||
.cockpit-log-service,
|
||||
.cockpit-log-service-reduced {
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
|
||||
.cockpit-log-service-container > .pf-c-badge {
|
||||
margin-left: var(--pf-global--spacer--xs);
|
||||
margin-left: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
.cockpit-log-service-container {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 428px) {
|
||||
.cockpit-logline {
|
||||
/* Remove space for service */
|
||||
--log-service: 0;
|
||||
}
|
||||
.cockpit-logline {
|
||||
/* Remove space for service */
|
||||
--log-service: 0;
|
||||
}
|
||||
|
||||
.cockpit-log-service,
|
||||
.cockpit-log-service-reduced,
|
||||
.cockpit-log-service-container {
|
||||
/* Move service under message */
|
||||
grid-area: 2 / 3;
|
||||
}
|
||||
.cockpit-log-service,
|
||||
.cockpit-log-service-reduced,
|
||||
.cockpit-log-service-container {
|
||||
/* Move service under message */
|
||||
grid-area: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,32 +4,32 @@
|
|||
// Therefore, we're changing the visuals here locally.
|
||||
// PF4 upstream request for multi-select @ https://github.com/patternfly/patternfly/issues/4027
|
||||
.ct-menu-select-widget.pf-c-menu {
|
||||
// It's not really a menu, so it shouldn't have a shadow
|
||||
box-shadow: none;
|
||||
// It's not really a menu, so it shouldn't have a shadow
|
||||
box-shadow: none;
|
||||
|
||||
// Divider is silly between the widgets in this context
|
||||
.pf-c-divider {
|
||||
display: none;
|
||||
}
|
||||
// Divider is silly between the widgets in this context
|
||||
.pf-c-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pf-c-menu__content {
|
||||
// An overflow multi-select widget needs an outline
|
||||
border: 1px solid var(--pf-global--BorderColor--100);
|
||||
// There should be minimal space between the widgets (replacing the divider)
|
||||
margin-top: var(--pf-global--spacer--sm);
|
||||
}
|
||||
.pf-c-menu__content {
|
||||
// An overflow multi-select widget needs an outline
|
||||
border: 1px solid var(--pf-global--BorderColor--100);
|
||||
// There should be minimal space between the widgets (replacing the divider)
|
||||
margin-top: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
// Search should not be inset when there's no border containing it
|
||||
.pf-c-menu__search {
|
||||
padding: 0;
|
||||
}
|
||||
// Search should not be inset when there's no border containing it
|
||||
.pf-c-menu__search {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Keep the background on a selected item even when it doesn't have
|
||||
// focus, allowing keyboard control to have the only background color
|
||||
// when active but also keep the background color when the list loses
|
||||
// focus (such as when the keyboard or mouse navigates outside,
|
||||
// including initial rendering of the list.
|
||||
.pf-c-menu__list:not(:focus-within) .pf-m-selected {
|
||||
background-color: var(--pf-c-menu__list-item--hover--BackgroundColor);
|
||||
}
|
||||
// Keep the background on a selected item even when it doesn't have
|
||||
// focus, allowing keyboard control to have the only background color
|
||||
// when active but also keep the background color when the list loses
|
||||
// focus (such as when the keyboard or mouse navigates outside,
|
||||
// including initial rendering of the list.
|
||||
.pf-c-menu__list:not(:focus-within) .pf-m-selected {
|
||||
background-color: var(--pf-c-menu__list-item--hover--BackgroundColor);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,28 +22,28 @@ h4 {
|
|||
|
||||
// Only apply a custom font size when a heading does NOT have a PF4 class
|
||||
h1, h2, h3, h4 {
|
||||
&:not([class*="pf-"]) {
|
||||
font-size: var(--ct-heading-font-size);
|
||||
}
|
||||
&:not([class*="pf-"]) {
|
||||
font-size: var(--ct-heading-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
/* End of headings resize */
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: auto;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
min-height: 26px;
|
||||
min-width: 26px;
|
||||
min-height: 26px;
|
||||
min-width: 26px;
|
||||
}
|
||||
|
||||
.btn.disabled, .pf-c-button.disabled {
|
||||
pointer-events: auto;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.btn.disabled:hover, .pf-c-button.disabled:hover {
|
||||
|
|
@ -51,36 +51,36 @@ a {
|
|||
}
|
||||
|
||||
.btn-group {
|
||||
/* Fix button groups from wrapping in narrow widths */
|
||||
display: inline-flex;
|
||||
/* Fix button groups from wrapping in narrow widths */
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
cursor: not-allowed !important;
|
||||
text-decoration: none;
|
||||
pointer-events: none;
|
||||
color: #8b8d8f;
|
||||
cursor: not-allowed !important;
|
||||
text-decoration: none;
|
||||
pointer-events: none;
|
||||
color: #8b8d8f;
|
||||
}
|
||||
|
||||
a.disabled:hover {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.highlight-ct {
|
||||
background-color: var(--ct-color-link-hover-bg);
|
||||
background-color: var(--ct-color-link-hover-bg);
|
||||
}
|
||||
|
||||
.curtains-ct {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Animation of new items */
|
||||
.ct-new-item {
|
||||
animation: ctNewRow 4s ease-in;
|
||||
animation: ctNewRow 4s ease-in;
|
||||
}
|
||||
|
||||
:root {
|
||||
--ct-animation-new-background: #fdf4dd;
|
||||
--ct-animation-new-background: #fdf4dd;
|
||||
}
|
||||
|
||||
/* Animation background is instantly yellow and fades out halfway through */
|
||||
|
|
@ -97,65 +97,65 @@ a.disabled:hover {
|
|||
/* Dialog patterns */
|
||||
|
||||
.dialog-wait-ct {
|
||||
margin-top: 3px;
|
||||
/* Right align footer idle messages after the buttons */
|
||||
margin-left: auto;
|
||||
margin-top: 3px;
|
||||
/* Right align footer idle messages after the buttons */
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.dialog-wait-ct .spinner {
|
||||
display: inline-block;
|
||||
/* Add spacing between possible messages and the spinner */
|
||||
margin-left: var(--pf-global--spacer--md);
|
||||
display: inline-block;
|
||||
/* Add spacing between possible messages and the spinner */
|
||||
margin-left: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.dialog-wait-ct span {
|
||||
vertical-align: 4px;
|
||||
padding-left: 10px;
|
||||
vertical-align: 4px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Cockpit custom colors */
|
||||
--ct-color-light-red: #f8cccc;
|
||||
--ct-color-red-hat-red : #e00;
|
||||
/* Cockpit custom colors */
|
||||
--ct-color-light-red: #f8cccc;
|
||||
--ct-color-red-hat-red : #e00;
|
||||
|
||||
// Blend between --pf-global--palette--black-200 and 300
|
||||
--ct-global--palette--black-250: #e6e6e6;
|
||||
// Blend between --pf-global--palette--black-200 and 300
|
||||
--ct-global--palette--black-250: #e6e6e6;
|
||||
|
||||
/* Semantic colors */
|
||||
--ct-color-fg: var(--pf-global--color--100);
|
||||
--ct-color-bg: var(--pf-global--BackgroundColor--100);
|
||||
--ct-color-text: var(--ct-color-fg);
|
||||
/* Semantic colors */
|
||||
--ct-color-fg: var(--pf-global--color--100);
|
||||
--ct-color-bg: var(--pf-global--BackgroundColor--100);
|
||||
--ct-color-text: var(--ct-color-fg);
|
||||
|
||||
--ct-color-link : var(--pf-global--active-color--100);
|
||||
--ct-color-link-visited: var(--pf-global--active-color--100);
|
||||
--ct-color-link : var(--pf-global--active-color--100);
|
||||
--ct-color-link-visited: var(--pf-global--active-color--100);
|
||||
|
||||
--ct-color-subtle-copy: var(--pf-global--disabled-color--100);
|
||||
--ct-color-subtle-copy: var(--pf-global--disabled-color--100);
|
||||
|
||||
// General border color (semantic shortcut, instead of specifying the color directly)
|
||||
--ct-color-border: var(--pf-global--BorderColor--100);
|
||||
// General border color (semantic shortcut, instead of specifying the color directly)
|
||||
--ct-color-border: var(--pf-global--BorderColor--100);
|
||||
|
||||
// Used for highlighting link blocks (with a light background blue)
|
||||
--ct-color-link-hover-bg : var(--pf-global--palette--light-blue-100);
|
||||
// Used for highlighting link blocks (with a light background blue)
|
||||
--ct-color-link-hover-bg : var(--pf-global--palette--light-blue-100);
|
||||
|
||||
/* Colors used for custom lists */
|
||||
// as seen in Journal, Listing, Table widgets and pages like Machines, Updates, Services
|
||||
--ct-color-list-text : var(--ct-color-text);
|
||||
--ct-color-list-link : var(--ct-color-link);
|
||||
--ct-color-list-bg : var(--ct-color-bg);
|
||||
--ct-color-list-border : var(--ct-color-border);
|
||||
--ct-color-list-hover-text : var(--ct-color-link);
|
||||
--ct-color-list-hover-bg : var(--pf-global--BackgroundColor--150);
|
||||
--ct-color-list-hover-border : var(--pf-global--BackgroundColor--150);
|
||||
--ct-color-list-hover-icon : var(--pf-global--palette--light-blue-400);
|
||||
--ct-color-list-selected-text : var(--ct-color-link);
|
||||
--ct-color-list-selected-bg : var(--pf-global--BackgroundColor--150);
|
||||
--ct-color-list-selected-border : var(--pf-global--BackgroundColor--150);
|
||||
--ct-color-list-active-text : var(--pf-global--palette--blue-500);
|
||||
--ct-color-list-active-bg : var(--ct-color-bg);
|
||||
--ct-color-list-active-border : var(--ct-color-list-border);
|
||||
--ct-color-list-critical-bg : var(--pf-global--palette--red-50);
|
||||
--ct-color-list-critical-border : #e6bcbc; // red-500 mixed with white @ 50%
|
||||
--ct-color-list-critical-alert-text: var(--pf-global--palette--red-200);
|
||||
/* Colors used for custom lists */
|
||||
// as seen in Journal, Listing, Table widgets and pages like Machines, Updates, Services
|
||||
--ct-color-list-text : var(--ct-color-text);
|
||||
--ct-color-list-link : var(--ct-color-link);
|
||||
--ct-color-list-bg : var(--ct-color-bg);
|
||||
--ct-color-list-border : var(--ct-color-border);
|
||||
--ct-color-list-hover-text : var(--ct-color-link);
|
||||
--ct-color-list-hover-bg : var(--pf-global--BackgroundColor--150);
|
||||
--ct-color-list-hover-border : var(--pf-global--BackgroundColor--150);
|
||||
--ct-color-list-hover-icon : var(--pf-global--palette--light-blue-400);
|
||||
--ct-color-list-selected-text : var(--ct-color-link);
|
||||
--ct-color-list-selected-bg : var(--pf-global--BackgroundColor--150);
|
||||
--ct-color-list-selected-border : var(--pf-global--BackgroundColor--150);
|
||||
--ct-color-list-active-text : var(--pf-global--palette--blue-500);
|
||||
--ct-color-list-active-bg : var(--ct-color-bg);
|
||||
--ct-color-list-active-border : var(--ct-color-list-border);
|
||||
--ct-color-list-critical-bg : var(--pf-global--palette--red-50);
|
||||
--ct-color-list-critical-border : #e6bcbc; // red-500 mixed with white @ 50%
|
||||
--ct-color-list-critical-alert-text: var(--pf-global--palette--red-200);
|
||||
}
|
||||
|
||||
[hidden] { display: none !important; }
|
||||
|
|
@ -171,24 +171,24 @@ html:not(.index-page) body {
|
|||
}
|
||||
|
||||
.ct-icon-info-circle {
|
||||
color: var(--pf-global--info-color--100);
|
||||
color: var(--pf-global--info-color--100);
|
||||
}
|
||||
|
||||
.ct-icon-exclamation-triangle {
|
||||
color: var(--pf-global--warning-color--100);
|
||||
color: var(--pf-global--warning-color--100);
|
||||
}
|
||||
|
||||
.ct-icon-times-circle {
|
||||
color: var(--pf-global--danger-color--100);
|
||||
color: var(--pf-global--danger-color--100);
|
||||
}
|
||||
|
||||
// Action buttons in headers add extra space. Offset that with a negative margin
|
||||
// to compensate, so headings are always the same height regardless of action
|
||||
// buttons or not.
|
||||
.pf-c-page__main-breadcrumb .pf-c-button {
|
||||
--offset: calc(-1 * var(--pf-global--spacer--sm));
|
||||
margin-top: var(--offset);
|
||||
margin-bottom: var(--offset);
|
||||
--offset: calc(-1 * var(--pf-global--spacer--sm));
|
||||
margin-top: var(--offset);
|
||||
margin-bottom: var(--offset);
|
||||
}
|
||||
|
||||
// Drop side padding in mobile mode,
|
||||
|
|
@ -196,8 +196,8 @@ html:not(.index-page) body {
|
|||
// It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }},
|
||||
// except this only affects the sides, not the top and bottom.
|
||||
@media screen and (max-width: $pf-global--breakpoint--sm) {
|
||||
.ct-pagesection-mobile {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
.ct-pagesection-mobile {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
@mixin printRedHatFont(
|
||||
$weightValue: 400,
|
||||
$weightValue: 400,
|
||||
$weightName: "Regular",
|
||||
$familyName: "RedHatText",
|
||||
$style: "normal",
|
||||
$relative: true
|
||||
) {
|
||||
$filePath: "../../static/fonts" + "/" + $familyName + "-" + $weightName;
|
||||
$filePath: "../../static/fonts" + "/" + $familyName + "-" + $weightName;
|
||||
|
||||
@font-face {
|
||||
font-family: $familyName;
|
||||
src: url("#{$filePath}.woff2") format("woff2");
|
||||
font-style: #{$style};
|
||||
font-weight: $weightValue;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
@font-face {
|
||||
font-family: $familyName;
|
||||
src: url("#{$filePath}.woff2") format("woff2");
|
||||
font-style: #{$style};
|
||||
font-weight: $weightValue;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
}
|
||||
|
||||
@include printRedHatFont(700, "Bold", $familyName: "RedHatDisplay");
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@
|
|||
/* See: https://github.com/patternfly/patternfly-design/issues/840 */
|
||||
/* Helper mod to wrap pf-c-nav__tertiary */
|
||||
.ct-m-nav__tertiary-wrap {
|
||||
.pf-c-nav__list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.pf-c-nav__list {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pf-c-nav__scroll-button {
|
||||
display: none;
|
||||
}
|
||||
.pf-c-nav__scroll-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Helper mod to center pf-c-nav__tertiary when it wraps */
|
||||
.ct-m-nav__tertiary-center {
|
||||
.pf-c-nav__list {
|
||||
justify-content: center;
|
||||
}
|
||||
.pf-c-nav__list {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix overflow issue with tabs, especially seen in small sizes, like mobile
|
||||
|
|
@ -36,13 +36,13 @@ This disables the large and halfway useless overflow buttons and causes the tabs
|
|||
to wrap around when there isn't enough space.
|
||||
*/
|
||||
.pf-c-tabs__list {
|
||||
flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
ul.pf-c-select__menu {
|
||||
max-width: 20rem;
|
||||
max-height: 20rem;
|
||||
overflow-y: auto;
|
||||
max-width: 20rem;
|
||||
max-height: 20rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Adjust padding on form selects to resemble PF non-form selects */
|
||||
|
|
@ -50,47 +50,47 @@ ul.pf-c-select__menu {
|
|||
/* Upstream: https://github.com/patternfly/patternfly/issues/4387 */
|
||||
/* Cockpit-Podman: https://github.com/cockpit-project/cockpit-podman/issues/755 */
|
||||
select.pf-c-form-control {
|
||||
--pf-c-form-control--PaddingRight: 41px;
|
||||
--pf-c-form-control--PaddingLeft: 8px;
|
||||
--pf-c-form-control--PaddingRight: 41px;
|
||||
--pf-c-form-control--PaddingLeft: 8px;
|
||||
|
||||
// Firefox's select text has additional padding (4px)
|
||||
@-moz-document url-prefix() {
|
||||
--pf-c-form-control--PaddingRight: 37px;
|
||||
--pf-c-form-control--PaddingLeft: 4px;
|
||||
}
|
||||
// Firefox's select text has additional padding (4px)
|
||||
@-moz-document url-prefix() {
|
||||
--pf-c-form-control--PaddingRight: 37px;
|
||||
--pf-c-form-control--PaddingLeft: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* All SVGs used in PF4 have some inline style to align them
|
||||
* https://github.com/patternfly/patternfly-react/issues/4767
|
||||
*/
|
||||
svg {
|
||||
vertical-align: -0.125em;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
// The default gap between the rows in horizontal lists is too large
|
||||
.pf-c-description-list.pf-m-horizontal-on-sm,
|
||||
.pf-c-description-list.pf-m-horizontal {
|
||||
--pf-c-description-list--RowGap: 1rem;
|
||||
--pf-c-description-list--RowGap: 1rem;
|
||||
}
|
||||
|
||||
.pf-c-description-list {
|
||||
// When using horizontal ruler inside description list it's just for the spacing - don't show it
|
||||
> hr {
|
||||
border-top: none;
|
||||
}
|
||||
// When using horizontal ruler inside description list it's just for the spacing - don't show it
|
||||
> hr {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-modal-box.pf-m-align-top {
|
||||
// We utilize custom footers in dialogs
|
||||
// Make sure that the buttons always appear in the next line from the inline alerts
|
||||
.pf-c-modal-box__footer {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--pf-global--spacer--sm);
|
||||
// We utilize custom footers in dialogs
|
||||
// Make sure that the buttons always appear in the next line from the inline alerts
|
||||
.pf-c-modal-box__footer {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--pf-global--spacer--sm);
|
||||
|
||||
> div:not(.pf-c-button):not(.dialog-wait-ct) {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
> div:not(.pf-c-button):not(.dialog-wait-ct) {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-card {
|
||||
|
|
@ -104,14 +104,14 @@ svg {
|
|||
justify-content: space-between;
|
||||
|
||||
> .pf-c-card__actions {
|
||||
flex-wrap: wrap;
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
flex-wrap: wrap;
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
|
||||
// PF4 CardActions act up when using buttons while the title is large of font
|
||||
// https://github.com/patternfly/patternfly/issues/3713
|
||||
// https://github.com/patternfly/patternfly/issues/4362
|
||||
margin: unset;
|
||||
padding-left: unset;
|
||||
// PF4 CardActions act up when using buttons while the title is large of font
|
||||
// https://github.com/patternfly/patternfly/issues/3713
|
||||
// https://github.com/patternfly/patternfly/issues/4362
|
||||
margin: unset;
|
||||
padding-left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -119,31 +119,31 @@ svg {
|
|||
// Alignment of checks is incorrect and inconsistent across browsers
|
||||
// Upstream issue: https://github.com/patternfly/patternfly/issues/3868
|
||||
.pf-c-check > .pf-c-check__input {
|
||||
// Set the height of the input widget to be the same as its label
|
||||
--pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
|
||||
// Offset by the top half of the difference between the height and the line height
|
||||
--pf-c-check__input--MarginTop: calc((var(--pf-c-check__label--LineHeight) - 1) / 2 * var(--pf-c-check__input--Height));
|
||||
// PF3 sets a margin which messes with PF4, so set PF4's rule again here (Cockpit-specific mix of PF3+PF4)
|
||||
margin-top: var(--pf-c-check__input--MarginTop);
|
||||
// Set the height of the input widget to be the same as its label
|
||||
--pf-c-check__input--Height: var(--pf-c-check__label--FontSize);
|
||||
// Offset by the top half of the difference between the height and the line height
|
||||
--pf-c-check__input--MarginTop: calc((var(--pf-c-check__label--LineHeight) - 1) / 2 * var(--pf-c-check__input--Height));
|
||||
// PF3 sets a margin which messes with PF4, so set PF4's rule again here (Cockpit-specific mix of PF3+PF4)
|
||||
margin-top: var(--pf-c-check__input--MarginTop);
|
||||
}
|
||||
|
||||
// Alignment of checks is incorrect and inconsistent across browsers
|
||||
// Upstream issue: https://github.com/patternfly/patternfly/issues/3868
|
||||
.pf-c-radio > .pf-c-radio__input {
|
||||
// Set the height of the input widget to be the same as its label
|
||||
--pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
|
||||
// Offset by the top half of the difference between the height and the line height
|
||||
--pf-c-radio__input--MarginTop: calc((var(--pf-c-radio__label--LineHeight) - 1) / 2 * var(--pf-c-radio__input--Height));
|
||||
// PF3 sets a margin which messes with PF4, so set PF4's rule again here (Cockpit-specific mix of PF3+PF4)
|
||||
margin-top: var(--pf-c-radio__input--MarginTop);
|
||||
// Set the height of the input widget to be the same as its label
|
||||
--pf-c-radio__input--Height: var(--pf-c-radio__label--FontSize);
|
||||
// Offset by the top half of the difference between the height and the line height
|
||||
--pf-c-radio__input--MarginTop: calc((var(--pf-c-radio__label--LineHeight) - 1) / 2 * var(--pf-c-radio__input--Height));
|
||||
// PF3 sets a margin which messes with PF4, so set PF4's rule again here (Cockpit-specific mix of PF3+PF4)
|
||||
margin-top: var(--pf-c-radio__input--MarginTop);
|
||||
}
|
||||
|
||||
// Add some spacing to nested form groups - PF4 does not support these yet
|
||||
// https://github.com/patternfly/patternfly-design/issues/1012
|
||||
.pf-c-form__group-control {
|
||||
.pf-c-form__group, .pf-c-form__section {
|
||||
padding-top: var(--pf-global--spacer--md);
|
||||
}
|
||||
.pf-c-form__group, .pf-c-form__section {
|
||||
padding-top: var(--pf-global--spacer--md);
|
||||
}
|
||||
}
|
||||
|
||||
// Alerts use elements that have fonts set in other frameworks (including PF3);
|
||||
|
|
@ -151,71 +151,71 @@ svg {
|
|||
// Therefore, it should inherit from the alert font set at the pf-c-alert level.
|
||||
// https://github.com/patternfly/patternfly/issues/4206
|
||||
.pf-c-alert__title {
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.pf-c-toolbar {
|
||||
// Make summary content use the same vertical space as the filter toggle,
|
||||
// when possible.
|
||||
// https://github.com/patternfly/patternfly-design/issues/1055
|
||||
&.ct-compact {
|
||||
@media screen and (max-width: $pf-global--breakpoint--lg - 1) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
// Make summary content use the same vertical space as the filter toggle,
|
||||
// when possible.
|
||||
// https://github.com/patternfly/patternfly-design/issues/1055
|
||||
&.ct-compact {
|
||||
@media screen and (max-width: $pf-global--breakpoint--lg - 1) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .pf-c-toolbar__content:first-child {
|
||||
flex: auto;
|
||||
}
|
||||
> .pf-c-toolbar__content:first-child {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.pf-c-toolbar__content-section {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.pf-c-toolbar__content-section {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// When there is an Alert above the Form add some spacing
|
||||
.pf-c-modal-box .pf-c-alert + .pf-c-form {
|
||||
padding-top: var(--pf-global--FontSize--sm);
|
||||
padding-top: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
|
||||
// HACK: Not possible to specify text, so needs some hacks, see https://github.com/patternfly/patternfly-react/issues/6140
|
||||
.pf-c-toolbar__toggle {
|
||||
.pf-c-button.pf-m-plain {
|
||||
color: var(--pf-c-button--m-link--Color);
|
||||
.pf-c-button.pf-m-plain {
|
||||
color: var(--pf-c-button--m-link--Color);
|
||||
|
||||
.pf-c-button__icon {
|
||||
margin-right: var(--pf-global--spacer--sm);
|
||||
}
|
||||
}
|
||||
.pf-c-button__icon {
|
||||
margin-right: var(--pf-global--spacer--sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Flex should use gap, not a margin hack
|
||||
// https://github.com/patternfly/patternfly/issues/4523
|
||||
.pf-l-flex {
|
||||
gap: var(--pf-l-flex--spacer-base);
|
||||
gap: var(--pf-l-flex--spacer-base);
|
||||
|
||||
// Negate the margin hack used by immediate flex children
|
||||
// (except for nested flex, as we want to mind the gap)
|
||||
> :not(.pf-l-flex) {
|
||||
--pf-l-flex--spacer-base: 0;
|
||||
}
|
||||
// Negate the margin hack used by immediate flex children
|
||||
// (except for nested flex, as we want to mind the gap)
|
||||
> :not(.pf-l-flex) {
|
||||
--pf-l-flex--spacer-base: 0;
|
||||
}
|
||||
|
||||
// Undo all spacer modification adjustments
|
||||
&[class*="pf-m-space-items-"] {
|
||||
> * {
|
||||
--pf-l-flex--spacer: 0;
|
||||
}
|
||||
// Undo all spacer modification adjustments
|
||||
&[class*="pf-m-space-items-"] {
|
||||
> * {
|
||||
--pf-l-flex--spacer: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Re-add spacer modification adjustments on the flex layout widget
|
||||
// (using class attribute matching for handling breakpoint -on- also)
|
||||
@each $size in (none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl) {
|
||||
&[class*="pf-m-space-items-#{$size}"] {
|
||||
--pf-l-flex--spacer-base: var(--pf-l-flex--spacer--#{$size});
|
||||
}
|
||||
// Re-add spacer modification adjustments on the flex layout widget
|
||||
// (using class attribute matching for handling breakpoint -on- also)
|
||||
@each $size in (none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl) {
|
||||
&[class*="pf-m-space-items-#{$size}"] {
|
||||
--pf-l-flex--spacer-base: var(--pf-l-flex--spacer--#{$size});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// InputMenus now use the PF Panel component which mistakenly uses position:
|
||||
|
|
@ -224,9 +224,9 @@ svg {
|
|||
// popover panel describes.
|
||||
// https://github.com/patternfly/patternfly-react/issues/7592
|
||||
.pf-c-search-input__menu.pf-c-panel {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Breadcrumb links should have the correct pointing hand cursor.
|
||||
//
|
||||
|
|
@ -240,5 +240,5 @@ svg {
|
|||
//
|
||||
// Nevertheless, Cockpit needs to be adapted for this to work as expected.
|
||||
.pf-c-breadcrumb__link {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.ct-serverTime-time-picker {
|
||||
max-width: 7rem;
|
||||
max-width: 7rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
.panel .table {
|
||||
font-size: var(--pf-global--FontSize-s);
|
||||
font-size: var(--pf-global--FontSize-s);
|
||||
}
|
||||
|
||||
/* Panels don't draw borders between them */
|
||||
.panel > .table > tbody:first-child td {
|
||||
border-top: 1px solid rgb(221 221 221);
|
||||
border-top: 1px solid rgb(221 221 221);
|
||||
}
|
||||
|
||||
/* Table headers should not generate a double border */
|
||||
.panel .table thead tr th {
|
||||
border-bottom: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Fix panel heading alignment & mobile layout */
|
||||
|
||||
.panel-heading {
|
||||
align-items: center;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* (28px small size widget height) + (0.5rem * 2) */
|
||||
min-height: calc(28px + 1rem);
|
||||
padding: 0.5rem 1rem;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
align-items: center;
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* (28px small size widget height) + (0.5rem * 2) */
|
||||
min-height: calc(28px + 1rem);
|
||||
padding: 0.5rem 1rem;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.panel-title > a {
|
||||
color: var(--ct-color-link);
|
||||
display: inline-block;
|
||||
color: var(--ct-color-link);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.panel-title > a:hover,
|
||||
.panel-title > a:focus {
|
||||
color: var(--alert-info-text);
|
||||
color: var(--alert-info-text);
|
||||
}
|
||||
|
||||
/* Allow children in the title to wrap */
|
||||
|
|
@ -47,63 +47,63 @@
|
|||
.panel-title > a,
|
||||
.panel-title > div,
|
||||
.panel-title > span {
|
||||
flex-shrink: 1;
|
||||
word-break: break-all;
|
||||
flex-shrink: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.panel-heading > :last-child:not(:first-child),
|
||||
.panel-heading > .panel-heading-actions {
|
||||
flex: auto;
|
||||
text-align: right;
|
||||
flex: auto;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
/* Remove _most_ of the gaps on the sides of small screens */
|
||||
/* to maximize space, but still keep the boxy panel look */
|
||||
.col-md-12 > .panel {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
/* Remove _most_ of the gaps on the sides of small screens */
|
||||
/* to maximize space, but still keep the boxy panel look */
|
||||
.col-md-12 > .panel {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
/* Background fade */
|
||||
--hi-color: #d1d1d1;
|
||||
--hi-color2: var(--ct-global--palette--black-250);
|
||||
--bg-color: var(--ct-color-bg);
|
||||
--hi-width: 20px;
|
||||
--hi-width3: calc(var(--hi-width) * 3);
|
||||
--transparent: rgb(255 255 255 / 0%); /* WebKit needs white transparent */
|
||||
max-width: 100vw;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
background-image:
|
||||
linear-gradient(to left, var(--bg-color) var(--hi-width), var(--transparent) var(--hi-width3)),
|
||||
linear-gradient(to left, var(--hi-color) 1px, var(--transparent) 2px, var(--hi-color2) 4px, var(--bg-color) var(--hi-width)),
|
||||
linear-gradient(to right, var(--bg-color) var(--hi-width), var(--transparent) var(--hi-width3)),
|
||||
linear-gradient(to right, var(--hi-color) 1px, var(--transparent) 2px, var(--hi-color2) 4px, var(--bg-color) var(--hi-width));
|
||||
background-attachment: local, scroll, local, scroll;
|
||||
background-position: right, right, left, left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--hi-width3) 100%;
|
||||
}
|
||||
.panel {
|
||||
/* Background fade */
|
||||
--hi-color: #d1d1d1;
|
||||
--hi-color2: var(--ct-global--palette--black-250);
|
||||
--bg-color: var(--ct-color-bg);
|
||||
--hi-width: 20px;
|
||||
--hi-width3: calc(var(--hi-width) * 3);
|
||||
--transparent: rgb(255 255 255 / 0%); /* WebKit needs white transparent */
|
||||
max-width: 100vw;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
background-image:
|
||||
linear-gradient(to left, var(--bg-color) var(--hi-width), var(--transparent) var(--hi-width3)),
|
||||
linear-gradient(to left, var(--hi-color) 1px, var(--transparent) 2px, var(--hi-color2) 4px, var(--bg-color) var(--hi-width)),
|
||||
linear-gradient(to right, var(--bg-color) var(--hi-width), var(--transparent) var(--hi-width3)),
|
||||
linear-gradient(to right, var(--hi-color) 1px, var(--transparent) 2px, var(--hi-color2) 4px, var(--bg-color) var(--hi-width));
|
||||
background-attachment: local, scroll, local, scroll;
|
||||
background-position: right, right, left, left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: var(--hi-width3) 100%;
|
||||
}
|
||||
|
||||
.panel > .panel-heading {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.panel > .panel-heading {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.panel .table thead th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.panel .table thead th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.panel .table:not(:hover):not(:focus):not(:active) {
|
||||
background: transparent;
|
||||
}
|
||||
.panel .table:not(:hover):not(:focus):not(:active) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.panel .table thead:not(:hover):not(:focus):not(:active) {
|
||||
background: transparent;
|
||||
}
|
||||
.panel .table thead:not(:hover):not(:focus):not(:active) {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -113,36 +113,36 @@
|
|||
*/
|
||||
.table-hover > tbody > tr > td,
|
||||
.table-hover > tbody > tr > th {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.table-hover > tbody > tr:hover > td,
|
||||
.table-hover > tbody > tr:hover > th {
|
||||
/* PF3 uses a light blue; we have to force the override for hover colors */
|
||||
background-color: var(--ct-color-list-hover-bg) !important;
|
||||
color: var(--ct-color-list-hover-text) !important;
|
||||
/* PF3 uses a light blue; we have to force the override for hover colors */
|
||||
background-color: var(--ct-color-list-hover-bg) !important;
|
||||
color: var(--ct-color-list-hover-text) !important;
|
||||
}
|
||||
|
||||
/* Override patternfly to fit buttons and such */
|
||||
.table > thead > tr > th,
|
||||
.table > tbody > tr > td {
|
||||
padding: 0.5rem;
|
||||
vertical-align: baseline;
|
||||
padding: 0.5rem;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Override the heavy patternfly headers */
|
||||
.table > thead {
|
||||
background-image: none;
|
||||
background-color: var(--ct-color-bg);
|
||||
background-image: none;
|
||||
background-color: var(--ct-color-bg);
|
||||
}
|
||||
|
||||
/* Make things line up */
|
||||
.table tbody tr > :first-child,
|
||||
.table thead tr > :first-child {
|
||||
padding-left: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.table tbody tr > :last-child,
|
||||
.table thead tr > :last-child {
|
||||
padding-right: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
@import "@patternfly/patternfly/utilities/Spacing/spacing.css";
|
||||
|
||||
#app {
|
||||
section.pf-c-page__main-breadcrumb {
|
||||
padding-bottom: var(--pf-c-page__main-breadcrumb--PaddingTop);
|
||||
}
|
||||
section.pf-c-page__main-breadcrumb {
|
||||
padding-bottom: var(--pf-c-page__main-breadcrumb--PaddingTop);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove doubled-up padding on "main" sections, when two+ sections are used.
|
||||
.pf-c-page__main-section + .pf-c-page__main-section {
|
||||
padding-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// FIXME: More styles from ct-system-overview
|
||||
|
|
@ -24,169 +24,169 @@
|
|||
|
||||
// the cards already have padding, align the "top 5" tables with the other content
|
||||
.pf-c-table {
|
||||
--pf-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
|
||||
--pf-c-table--m-compact--cell--first-last-child--PaddingRight: 0;
|
||||
--pf-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
|
||||
--pf-c-table--m-compact--cell--first-last-child--PaddingRight: 0;
|
||||
|
||||
tr > * {
|
||||
--pf-c-table--cell--PaddingTop: var(--pf-global--spacer--xs);
|
||||
--pf-c-table--cell--PaddingBottom: var(--pf-global--spacer--xs);
|
||||
}
|
||||
tr > * {
|
||||
--pf-c-table--cell--PaddingTop: var(--pf-global--spacer--xs);
|
||||
--pf-c-table--cell--PaddingBottom: var(--pf-global--spacer--xs);
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-card {
|
||||
// Make sure the cards do not get taller than 50% of the screen
|
||||
// ...and when they do, they should scroll
|
||||
@media screen and (orientation: landscape) {
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
// Make sure the cards do not get taller than 50% of the screen
|
||||
// ...and when they do, they should scroll
|
||||
@media screen and (orientation: landscape) {
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: var(--pf-global--FontSize--xl);
|
||||
font-weight: var(--pf-global--FontWeight--normal);
|
||||
}
|
||||
|
||||
// Let the children get flexy
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// Strip the padding from the first item,
|
||||
// including table headings
|
||||
> :first-child,
|
||||
> :first-child > thead > tr > th {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: var(--pf-global--FontSize--xl);
|
||||
font-weight: var(--pf-global--FontWeight--normal);
|
||||
.pf-c-table thead th:not(:first-child),
|
||||
.pf-c-table tbody td:not(:first-child) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.align-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.text-color-warning {
|
||||
color: var(--pf-global--warning-color--200);
|
||||
}
|
||||
|
||||
.icon-color-warning {
|
||||
color: var(--pf-global--warning-color--100);
|
||||
}
|
||||
|
||||
.text-color-critical {
|
||||
color: var(--pf-global--danger-color--200);
|
||||
}
|
||||
|
||||
.icon-color-critical {
|
||||
color: var(--pf-global--danger-color--100);
|
||||
}
|
||||
|
||||
.progress-stack {
|
||||
display: grid;
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
grid-gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--pf-global--spacer--sm);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-stack-no-space {
|
||||
display: grid;
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
grid-gap: 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
// Let the children get flexy
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// Strip the padding from the first item,
|
||||
// including table headings
|
||||
> :first-child,
|
||||
> :first-child > thead > tr > th {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.pf-c-table thead th:not(:first-child),
|
||||
.pf-c-table tbody td:not(:first-child) {
|
||||
text-align: right;
|
||||
}
|
||||
// avoid the "x" icon on high CPU usage
|
||||
.pf-c-progress__status-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.align-baseline {
|
||||
align-items: baseline;
|
||||
// don't center the "View all CPUs" button
|
||||
button {
|
||||
padding-left: 0;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.text-color-warning {
|
||||
color: var(--pf-global--warning-color--200);
|
||||
}
|
||||
// Stretch the progress stack and description list so they fill up remaining space.
|
||||
// This pushes the (unflexing) tables to the bottom.
|
||||
.progress-stack,
|
||||
.pf-c-description-list {
|
||||
flex: 1 1 0;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.icon-color-warning {
|
||||
color: var(--pf-global--warning-color--100);
|
||||
}
|
||||
// When progress stack and description list are used sequentially,
|
||||
// give the most space to the latter of the two elements.
|
||||
.progress-stack + .pf-c-description-list,
|
||||
.pf-c-description-list + .progress-stack {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
.text-color-critical {
|
||||
color: var(--pf-global--danger-color--200);
|
||||
}
|
||||
// WebKit is a little wonky with flex sizing; it needs specific instructions here
|
||||
.pf-c-description-list:first-child {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.icon-color-critical {
|
||||
color: var(--pf-global--danger-color--100);
|
||||
}
|
||||
|
||||
.progress-stack {
|
||||
display: grid;
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
grid-gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--pf-global--spacer--sm);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-stack-no-space {
|
||||
display: grid;
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
grid-gap: 0;
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
// avoid the "x" icon on high CPU usage
|
||||
.pf-c-progress__status-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// don't center the "View all CPUs" button
|
||||
button {
|
||||
padding-left: 0;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
// Stretch the progress stack and description list so they fill up remaining space.
|
||||
// This pushes the (unflexing) tables to the bottom.
|
||||
.progress-stack,
|
||||
.pf-c-description-list {
|
||||
flex: 1 1 0;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
// When progress stack and description list are used sequentially,
|
||||
// give the most space to the latter of the two elements.
|
||||
.progress-stack + .pf-c-description-list,
|
||||
.pf-c-description-list + .progress-stack {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
// WebKit is a little wonky with flex sizing; it needs specific instructions here
|
||||
.pf-c-description-list:first-child {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.pf-c-description-list__description {
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
.pf-c-description-list__description {
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
}
|
||||
|
||||
// Shrink progress bars and their gap a little
|
||||
.pf-c-progress {
|
||||
grid-gap: 0;
|
||||
--pf-c-progress__bar--Height: var(--pf-global--spacer--xs);
|
||||
// PF4 uses end; it probably should arguably use last baseline.
|
||||
// (perhaps end may work better for non-text content?)
|
||||
align-items: last baseline;
|
||||
grid-gap: 0;
|
||||
--pf-c-progress__bar--Height: var(--pf-global--spacer--xs);
|
||||
// PF4 uses end; it probably should arguably use last baseline.
|
||||
// (perhaps end may work better for non-text content?)
|
||||
align-items: last baseline;
|
||||
|
||||
+ .pf-c-progress {
|
||||
// Add a tiny gap for sandwiched usage bars (as in CPU)
|
||||
padding-top: 1px;
|
||||
}
|
||||
+ .pf-c-progress {
|
||||
// Add a tiny gap for sandwiched usage bars (as in CPU)
|
||||
padding-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Only underline the description
|
||||
.pf-c-button.pf-m-link.pf-m-inline:hover {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
|
||||
.pf-c-progress__description {
|
||||
text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration);
|
||||
}
|
||||
.pf-c-progress__description {
|
||||
text-decoration: var(--pf-c-button--m-link--m-inline--hover--TextDecoration);
|
||||
}
|
||||
}
|
||||
|
||||
// Match font weight with description list terms
|
||||
.pf-c-progress__description {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
}
|
||||
|
||||
// Recolor text
|
||||
.pf-m-link {
|
||||
&, &:hover {
|
||||
.pf-c-progress__measure {
|
||||
color: var(--pf-global--Color--100);
|
||||
&, &:hover {
|
||||
.pf-c-progress__measure {
|
||||
color: var(--pf-global--Color--100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// default is way too wide for the cards
|
||||
.pf-c-description-list {
|
||||
--pf-c-description-list--m-horizontal__term--width: minmax(0, auto);
|
||||
--pf-c-description-list--m-horizontal__description--width: minmax(0, auto);
|
||||
--pf-c-description-list--m-horizontal__term--width: minmax(0, auto);
|
||||
--pf-c-description-list--m-horizontal__description--width: minmax(0, auto);
|
||||
}
|
||||
|
||||
// Don't wrap network in / out data
|
||||
td[data-label="In"],
|
||||
td[data-label="Out"] {
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Shrink network cards and data a little more
|
||||
|
|
@ -195,43 +195,43 @@
|
|||
td[data-label="In"],
|
||||
td[data-label="Out"],
|
||||
td[data-label="Interface"] {
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
}
|
||||
|
||||
// Shrink percentage column to allow for more service text
|
||||
th[data-label="%"],
|
||||
td[data-label="%"] {
|
||||
.pf-c-table__text {
|
||||
.pf-c-table__text {
|
||||
--pf-c-table--cell--MinWidth: 0;
|
||||
display: inline;
|
||||
}
|
||||
width: 2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
width: 2rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
// Adjust responsive versions of lg grid tables
|
||||
// (mainly for the network table, as it is more information dense)
|
||||
.pf-m-grid-lg.pf-c-table {
|
||||
tbody:first-of-type {
|
||||
border-top: none;
|
||||
tbody:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
tbody tr:not(.pf-c-table__expandable-row) {
|
||||
--pf-c-table-tr--responsive--PaddingTop: var(--pf-global--spacer--sm);
|
||||
--pf-c-table-tr--responsive--PaddingRight: 0;
|
||||
--pf-c-table-tr--responsive--PaddingBottom: var(--pf-global--spacer--sm);
|
||||
--pf-c-table-tr--responsive--PaddingLeft: 0;
|
||||
--pf-c-table-tr--responsive--border-width--base: 1px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr:not(.pf-c-table__expandable-row) {
|
||||
--pf-c-table-tr--responsive--PaddingTop: var(--pf-global--spacer--sm);
|
||||
--pf-c-table-tr--responsive--PaddingRight: 0;
|
||||
--pf-c-table-tr--responsive--PaddingBottom: var(--pf-global--spacer--sm);
|
||||
--pf-c-table-tr--responsive--PaddingLeft: 0;
|
||||
--pf-c-table-tr--responsive--border-width--base: 1px;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
> * {
|
||||
--pf-c-table--cell--responsive--PaddingTop: 0;
|
||||
--pf-c-table--cell--responsive--PaddingBottom: 0;
|
||||
}
|
||||
> * {
|
||||
--pf-c-table--cell--responsive--PaddingTop: 0;
|
||||
--pf-c-table--cell--responsive--PaddingBottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -247,7 +247,7 @@
|
|||
|
||||
// Trim down the gutter space between cards
|
||||
.current-metrics.pf-l-gallery.pf-m-gutter {
|
||||
grid-gap: var(--pf-global--spacer--sm);
|
||||
grid-gap: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
// Shave off a few pixels from cards
|
||||
|
|
@ -265,331 +265,331 @@
|
|||
@media (min-width: 460px) and (max-width: 1200px) {
|
||||
// Stack description lists (instead of grid)
|
||||
.pf-c-description-list__group {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Stretch network card and reflow items
|
||||
@media (min-width: 660px) and (max-width: 860px) {
|
||||
.current-metrics-network {
|
||||
grid-column: 1 / -1;
|
||||
.current-metrics-network {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
// Reflow interfaces horizontally, with wrapping
|
||||
.pf-c-table > tbody {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
grid-gap: 0 var(--pf-global--spacer--lg);
|
||||
}
|
||||
// Reflow interfaces horizontally, with wrapping
|
||||
.pf-c-table > tbody {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
grid-gap: 0 var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.metrics {
|
||||
--column-size: 10vw;
|
||||
--half-column-size: 8vw;
|
||||
--data-min-height: 5px;
|
||||
--column-size: 10vw;
|
||||
--half-column-size: 8vw;
|
||||
--data-min-height: 5px;
|
||||
|
||||
&-heading,
|
||||
&-minute {
|
||||
&-heading,
|
||||
&-minute {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-graphs {
|
||||
display: inherit;
|
||||
|
||||
.metrics-data,
|
||||
.metrics-label {
|
||||
width: var(--half-column-size);
|
||||
}
|
||||
|
||||
.metrics-data.have-saturation,
|
||||
.metrics-label.have-saturation {
|
||||
width: var(--column-size);
|
||||
}
|
||||
|
||||
.metrics-data {
|
||||
min-height: var(--data-min-height);
|
||||
}
|
||||
}
|
||||
|
||||
&-label {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
&-sublabels {
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
color: rgb(0 0 0 / 70%);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-label-graph {
|
||||
text-align: right;
|
||||
|
||||
& .metrics-sublabels {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&-label-graph.have-saturation {
|
||||
text-align: center;
|
||||
|
||||
& .metrics-sublabels {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
&-events-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-events {
|
||||
width: 100%;
|
||||
|
||||
// Remove left padding from the table toggle
|
||||
.pf-c-table__toggle {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: grid;
|
||||
grid-template-columns: [info] 1fr [time] 1fr;
|
||||
|
||||
.details {
|
||||
grid-column: time;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-graphs {
|
||||
display: inherit;
|
||||
|
||||
.metrics-data,
|
||||
.metrics-label {
|
||||
width: var(--half-column-size);
|
||||
}
|
||||
|
||||
.metrics-data.have-saturation,
|
||||
.metrics-label.have-saturation {
|
||||
width: var(--column-size);
|
||||
}
|
||||
|
||||
.metrics-data {
|
||||
min-height: var(--data-min-height);
|
||||
}
|
||||
}
|
||||
|
||||
&-label {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
&-sublabels {
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
color: rgb(0 0 0 / 70%);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-label-graph {
|
||||
text-align: right;
|
||||
|
||||
& .metrics-sublabels {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&-label-graph.have-saturation {
|
||||
text-align: center;
|
||||
|
||||
& .metrics-sublabels {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
&-events-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.type {
|
||||
grid-column: info;
|
||||
}
|
||||
}
|
||||
|
||||
&-events {
|
||||
width: 100%;
|
||||
// Make messages such as `Loading...` or `No logs found` centered
|
||||
.cockpit-log-panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
// Remove left padding from the table toggle
|
||||
.pf-c-table__toggle {
|
||||
padding-left: 0;
|
||||
}
|
||||
.cockpit-logline {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
display: grid;
|
||||
grid-template-columns: [info] 1fr [time] 1fr;
|
||||
&-time,
|
||||
&-heading {
|
||||
position: relative;
|
||||
width: calc(100% + var(--pf-c-page__main-section--PaddingRight) + var(--pf-c-page__main-section--PaddingLeft));
|
||||
right: var(--pf-c-page__main-section--PaddingRight);
|
||||
|
||||
.details {
|
||||
grid-column: time;
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
padding-right: var(--pf-c-page__main-section--PaddingRight);
|
||||
padding-left: var(--pf-c-page__main-section--PaddingLeft);
|
||||
}
|
||||
|
||||
.type {
|
||||
grid-column: info;
|
||||
}
|
||||
}
|
||||
&-time {
|
||||
background: #eee;
|
||||
|
||||
// Make messages such as `Loading...` or `No logs found` centered
|
||||
.cockpit-log-panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 1rem;
|
||||
margin-left: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.cockpit-logline {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
}
|
||||
&-heading {
|
||||
background: #fff;
|
||||
margin-bottom: 0.25rem;
|
||||
box-shadow: var(--pf-global--BoxShadow--sm);
|
||||
|
||||
&-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
|
||||
&-history {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&-data {
|
||||
display: grid;
|
||||
contain: strict;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
// Make SVG and generated before/after line position relative to metrics-data
|
||||
position: relative;
|
||||
|
||||
// vertical ruler line for areas with data, and horizontal tick mark for utilization half
|
||||
&.valid-data::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-right: 1px solid rgb(0 0 0 / 30%);
|
||||
border-top: 1px solid rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
&-time,
|
||||
&-heading {
|
||||
position: relative;
|
||||
width: calc(100% + var(--pf-c-page__main-section--PaddingRight) + var(--pf-c-page__main-section--PaddingLeft));
|
||||
right: var(--pf-c-page__main-section--PaddingRight);
|
||||
|
||||
padding-right: var(--pf-c-page__main-section--PaddingRight);
|
||||
padding-left: var(--pf-c-page__main-section--PaddingLeft);
|
||||
&.valid-data.have-saturation::before {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&-time {
|
||||
background: #eee;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
margin-left: var(--pf-global--spacer--md);
|
||||
// horizontal tick mark for saturation half, for resources that have it
|
||||
&.valid-data.have-saturation::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 50%;
|
||||
left: 50%;
|
||||
border-top: 1px solid rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
&-heading {
|
||||
background: #fff;
|
||||
margin-bottom: 0.25rem;
|
||||
box-shadow: var(--pf-global--BoxShadow--sm);
|
||||
|
||||
&-sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
> svg {
|
||||
fill: var(--color);
|
||||
min-width: 2px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// WebKit has an issue with normal positioning (height exceeds bounds), but absolute works fine
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-history {
|
||||
padding: 0;
|
||||
&-cpu {
|
||||
--color: plum;
|
||||
}
|
||||
|
||||
&-data {
|
||||
display: grid;
|
||||
contain: strict;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
// Make SVG and generated before/after line position relative to metrics-data
|
||||
position: relative;
|
||||
|
||||
// vertical ruler line for areas with data, and horizontal tick mark for utilization half
|
||||
&.valid-data::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-right: 1px solid rgb(0 0 0 / 30%);
|
||||
border-top: 1px solid rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
&.valid-data.have-saturation::before {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
// horizontal tick mark for saturation half, for resources that have it
|
||||
&.valid-data.have-saturation::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 50%;
|
||||
left: 50%;
|
||||
border-top: 1px solid rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
> svg {
|
||||
fill: var(--color);
|
||||
min-width: 2px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// WebKit has an issue with normal positioning (height exceeds bounds), but absolute works fine
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-cpu {
|
||||
--color: plum;
|
||||
}
|
||||
|
||||
&-memory {
|
||||
--color: lightblue;
|
||||
}
|
||||
|
||||
&-disks {
|
||||
--color: lightgreen;
|
||||
}
|
||||
|
||||
&-network {
|
||||
--color: lightsalmon;
|
||||
}
|
||||
|
||||
// compressed minutes without events are simple bars
|
||||
.compressed {
|
||||
display: grid;
|
||||
grid-template-areas: ". utilization .";
|
||||
|
||||
--util-pct: calc(100% * var(--utilization));
|
||||
grid-template-columns: calc(100% - var(--util-pct)) var(--util-pct);
|
||||
|
||||
> .saturation,
|
||||
> .utilization {
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
> .utilization {
|
||||
grid-area: utilization;
|
||||
}
|
||||
|
||||
> .saturation {
|
||||
grid-area: saturation;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
&.have-saturation .compressed {
|
||||
grid-template-areas: ". utilization saturation .";
|
||||
--util-pct: calc(50% * var(--utilization));
|
||||
--sat-pct: calc(50% * var(--saturation));
|
||||
grid-template-columns: calc(50% - var(--util-pct)) var(--util-pct) var(--sat-pct) calc(50% - var(--sat-pct));
|
||||
}
|
||||
&-memory {
|
||||
--color: lightblue;
|
||||
}
|
||||
|
||||
// vertical dotted line through graph center, for areas without data
|
||||
&-data::after {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
&-disks {
|
||||
--color: lightgreen;
|
||||
}
|
||||
|
||||
&-data.empty-data::after {
|
||||
position: initial;
|
||||
border-right: 1px dotted rgb(0 0 0 / 30%);
|
||||
&-network {
|
||||
--color: lightsalmon;
|
||||
}
|
||||
|
||||
&-data.empty-data.have-saturation::after {
|
||||
position: absolute;
|
||||
border-left: 1px dotted rgb(0 0 0 / 30%);
|
||||
border-right: none;
|
||||
left: 50%;
|
||||
// compressed minutes without events are simple bars
|
||||
.compressed {
|
||||
display: grid;
|
||||
grid-template-areas: ". utilization .";
|
||||
|
||||
--util-pct: calc(100% * var(--utilization));
|
||||
grid-template-columns: calc(100% - var(--util-pct)) var(--util-pct);
|
||||
|
||||
> .saturation,
|
||||
> .utilization {
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
> .utilization {
|
||||
grid-area: utilization;
|
||||
}
|
||||
|
||||
> .saturation {
|
||||
grid-area: saturation;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-card__body:first-child {
|
||||
padding-top: 0;
|
||||
&.have-saturation .compressed {
|
||||
grid-template-areas: ". utilization saturation .";
|
||||
--util-pct: calc(50% * var(--utilization));
|
||||
--sat-pct: calc(50% * var(--saturation));
|
||||
grid-template-columns: calc(50% - var(--util-pct)) var(--util-pct) var(--sat-pct) calc(50% - var(--sat-pct));
|
||||
}
|
||||
}
|
||||
|
||||
// vertical dotted line through graph center, for areas without data
|
||||
&-data::after {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&-data.empty-data::after {
|
||||
position: initial;
|
||||
border-right: 1px dotted rgb(0 0 0 / 30%);
|
||||
}
|
||||
|
||||
&-data.empty-data.have-saturation::after {
|
||||
position: absolute;
|
||||
border-left: 1px dotted rgb(0 0 0 / 30%);
|
||||
border-right: none;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.pf-c-card__body:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Graph column labels are the widest part; scale down the labels for narrow widths
|
||||
@media (min-width: 800px) and (max-width: 1200px) {
|
||||
.metrics-label-graph {
|
||||
font-size: var(--pf-global--FontSize--s);
|
||||
}
|
||||
.metrics-label-graph {
|
||||
font-size: var(--pf-global--FontSize--s);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.metrics-label-graph {
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
}
|
||||
.metrics-label-graph {
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-panel {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.nodata {
|
||||
margin: 1em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.select-min {
|
||||
width: min-content;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
#pcp-settings-modal {
|
||||
.pcp-settings-modal-text {
|
||||
// "Read more..." link
|
||||
a {
|
||||
padding-left: 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pcp-settings-modal-text {
|
||||
// "Read more..." link
|
||||
a {
|
||||
padding-left: 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// leave some space for the focus rings
|
||||
.pf-c-switch {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
// leave some space for the focus rings
|
||||
.pf-c-switch {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.cpu-all {
|
||||
--pf-l-grid--m-gutter--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--md);
|
||||
// Mixing font families need to be aligned properly (to the baseline)
|
||||
align-items: baseline;
|
||||
// In monospaced text, "100%" is 4 characters
|
||||
grid-template-columns: 1fr minmax(4ch, auto);
|
||||
--pf-l-grid--m-gutter--GridGap: var(--pf-global--spacer--xs) var(--pf-global--spacer--md);
|
||||
// Mixing font families need to be aligned properly (to the baseline)
|
||||
align-items: baseline;
|
||||
// In monospaced text, "100%" is 4 characters
|
||||
grid-template-columns: 1fr minmax(4ch, auto);
|
||||
|
||||
> .pf-l-grid__item {
|
||||
// Don't use PF's hardcoded 12-column grid
|
||||
grid-column: auto;
|
||||
}
|
||||
> .pf-l-grid__item {
|
||||
// Don't use PF's hardcoded 12-column grid
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
> dd {
|
||||
// TODO: Use tabular numbers instead of monospace,
|
||||
// after new font usage is enabled
|
||||
font-family: var(--pf-global--FontFamily--monospace);
|
||||
// Aligning percentages to the right, especially when monospaced,
|
||||
// makes it easier to see high percentages
|
||||
text-align: right;
|
||||
}
|
||||
> dd {
|
||||
// TODO: Use tabular numbers instead of monospace,
|
||||
// after new font usage is enabled
|
||||
font-family: var(--pf-global--FontFamily--monospace);
|
||||
// Aligning percentages to the right, especially when monospaced,
|
||||
// makes it easier to see high percentages
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,290 +6,290 @@
|
|||
|
||||
#firewall,
|
||||
#network-page {
|
||||
.pf-c-card {
|
||||
@extend .ct-card;
|
||||
}
|
||||
.pf-c-card {
|
||||
@extend .ct-card;
|
||||
}
|
||||
}
|
||||
|
||||
#networking, #network-interface {
|
||||
.pf-l-gallery {
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
}
|
||||
.pf-l-gallery {
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// General networking page overview
|
||||
.network-page {
|
||||
.cockpit-log-panel {
|
||||
max-width: 100vw;
|
||||
}
|
||||
.cockpit-log-panel {
|
||||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
#network-interface {
|
||||
@at-root {
|
||||
#network-interface-name {
|
||||
font-weight: var(--pf-c-card__title--FontWeight);
|
||||
}
|
||||
|
||||
.network-interface-status > span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
@at-root {
|
||||
#network-interface-name {
|
||||
font-weight: var(--pf-c-card__title--FontWeight);
|
||||
}
|
||||
|
||||
.network-interface-status > span {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.network-number-field {
|
||||
max-width: 4em;
|
||||
max-width: 4em;
|
||||
}
|
||||
|
||||
.network-graph {
|
||||
height: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.pf-c-page__main-breadcrumb + .networking-graphs {
|
||||
// Remove the top padding when following a breadcrumb
|
||||
padding-top: 0;
|
||||
// Remove the top padding when following a breadcrumb
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
// Constrain widths of networking headers (on both the main page and in network-interface-members)
|
||||
th {
|
||||
&.networking-speed {
|
||||
width: 20%;
|
||||
}
|
||||
&.networking-speed {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&.networking-spacer {
|
||||
width: var(--pf-global--spacer--4xl);
|
||||
}
|
||||
&.networking-spacer {
|
||||
width: var(--pf-global--spacer--4xl);
|
||||
}
|
||||
|
||||
&.networking-action {
|
||||
width: var(--pf-global--spacer--3xl);
|
||||
}
|
||||
&.networking-action {
|
||||
width: var(--pf-global--spacer--3xl);
|
||||
}
|
||||
}
|
||||
|
||||
.network-interface-details {
|
||||
&-title {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: var(--pf-global--spacer--md);
|
||||
&-title {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
&-delete {
|
||||
margin-right: var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
// Seems to be used for the "general" checkbox
|
||||
.networking-controls {
|
||||
label {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
&-delete {
|
||||
margin-right: var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
// Seems to be used for the "general" checkbox
|
||||
.networking-controls {
|
||||
label {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-left: 0;
|
||||
}
|
||||
input {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#networking-interfaces, #networking-unmanaged-interfaces {
|
||||
th[data-label="Name"] button {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
th[data-label="Name"] button {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
|
||||
// Preserve the same baseline as other elements, so items align
|
||||
display: inline;
|
||||
// Expand the link to the container, for easier clickability
|
||||
width: 100%;
|
||||
}
|
||||
// Preserve the same baseline as other elements, so items align
|
||||
display: inline;
|
||||
// Expand the link to the container, for easier clickability
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.network-interface-members {
|
||||
.pf-c-switch {
|
||||
margin-right: var(--pf-global--spacer--md);
|
||||
}
|
||||
.pf-c-switch {
|
||||
margin-right: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.pf-c-table > tbody > tr > td:last-child {
|
||||
--pf-c-table--cell--Width: 10%;
|
||||
text-align: right;
|
||||
}
|
||||
.pf-c-table > tbody > tr > td:last-child {
|
||||
--pf-c-table--cell--Width: 10%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// If the button is not the first item in the DescriptionListDescription all left padding
|
||||
.network-interface-settings dd .pf-c-description-list__text button:not(:first-child) {
|
||||
padding-left: var(--pf-global--spacer--md);
|
||||
padding-left: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
#network-mtu-settings-custom {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
#network-mtu-settings-input {
|
||||
margin-left: 0.5em;
|
||||
width: 5em;
|
||||
display: inline;
|
||||
margin-left: 0.5em;
|
||||
width: 5em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Temporary curtain to hide the content as it loads
|
||||
#testing-connection-curtain {
|
||||
z-index: 2000;
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.pf-l-flex > .network-ip-settings-method {
|
||||
width: 12rem;
|
||||
width: 12rem;
|
||||
}
|
||||
|
||||
#network-ip-settings-body {
|
||||
.pf-c-form__label {
|
||||
// Don't allow labels to wrap
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pf-c-form__label {
|
||||
// Don't allow labels to wrap
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remove-button-group {
|
||||
// Move 'Remove' button the the end of the row
|
||||
grid-column: -1;
|
||||
// Move 'Remove' button to the bottom of the line so as to align with the other form fields
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.remove-button-group {
|
||||
// Move 'Remove' button the the end of the row
|
||||
grid-column: -1;
|
||||
// Move 'Remove' button to the bottom of the line so as to align with the other form fields
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/********** Firewall section **********/
|
||||
|
||||
#add-services-dialog {
|
||||
.service-list {
|
||||
border: 1px solid var(--pf-c-data-list--BorderTopColor);
|
||||
height: 30rem;
|
||||
// full height minus UI, for mobile and small desktops
|
||||
max-height: calc(100vh - 20rem);
|
||||
overflow-y: auto;
|
||||
.service-list {
|
||||
border: 1px solid var(--pf-c-data-list--BorderTopColor);
|
||||
height: 30rem;
|
||||
// full height minus UI, for mobile and small desktops
|
||||
max-height: calc(100vh - 20rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.service-list-item-heading {
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.service-list-item-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.service-ports {
|
||||
opacity: 0.75;
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.service-list-item-heading {
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.service-list-item-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.service-ports {
|
||||
opacity: 0.75;
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.add-services-dialog-type {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.has-error {
|
||||
animation: 300ms error-slide-down ease-in-out;
|
||||
color: #c00;
|
||||
padding: 0;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
.add-services-dialog-type {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.has-error {
|
||||
animation: 300ms error-slide-down ease-in-out;
|
||||
color: #c00;
|
||||
padding: 0;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#firewall {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
|
||||
.ct-table tbody tr:first-of-type td:nth-child(2) {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
}
|
||||
.ct-table tbody tr:first-of-type td:nth-child(2) {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $pf-global--breakpoint--md) {
|
||||
.zone-section-heading.pf-c-card__header {
|
||||
padding-left: var(--pf-global--spacer--md);
|
||||
}
|
||||
.zone-section-heading.pf-c-card__header {
|
||||
padding-left: var(--pf-global--spacer--md);
|
||||
}
|
||||
}
|
||||
|
||||
#delete-confirmation-dialog {
|
||||
.delete-confirmation-body {
|
||||
display: flex;
|
||||
}
|
||||
.delete-confirmation-body {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
#add-zone-dialog legend {
|
||||
color: var(--ct-color-subtle-copy);
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
color: var(--ct-color-subtle-copy);
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
|
||||
.add-zone-zones legend {
|
||||
line-height: 3;
|
||||
line-height: 3;
|
||||
}
|
||||
|
||||
#add-zone-dialog .add-zone-zones .pf-c-radio__label {
|
||||
text-transform: capitalize;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/* Move firewalld zones higher in z-index (so lines can go behind) */
|
||||
.add-zone-zones-firewalld {
|
||||
input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
> label {
|
||||
/* FIXME: Add lines behind the radio buttons */
|
||||
&::after {
|
||||
border-bottom: 1px solid #d1d1d1;
|
||||
content: "";
|
||||
}
|
||||
|
||||
> label {
|
||||
/* FIXME: Add lines behind the radio buttons */
|
||||
&::after {
|
||||
border-bottom: 1px solid #d1d1d1;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Start line at the midpoint for the first radio */
|
||||
&:first-of-type::after {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/* End line at the midpoint for the last radio */
|
||||
&:last-of-type::after {
|
||||
right: 50%;
|
||||
}
|
||||
/* Start line at the midpoint for the first radio */
|
||||
&:first-of-type::after {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/* End line at the midpoint for the last radio */
|
||||
&:last-of-type::after {
|
||||
right: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Display labels below buttons */
|
||||
.add-zone-zones-firewalld, .add-zone-zones-custom {
|
||||
> label.radio {
|
||||
display: inline-flex;
|
||||
}
|
||||
> label.radio {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
#add-zone-description-readonly {
|
||||
padding: 0.5rem 0 0;
|
||||
color: var(--ct-color-subtle-copy);
|
||||
padding: 0.5rem 0 0;
|
||||
color: var(--ct-color-subtle-copy);
|
||||
}
|
||||
|
||||
#add-zone-services-readonly legend {
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Animation for Firewall's add service dialog,
|
||||
// as a sudden transition would be (otherwise) too jarring
|
||||
@keyframes error-slide-down {
|
||||
0% {
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
0% {
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
100% {
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-dropdown__menu-item.pf-m-danger {
|
||||
color: var(--pf-global--danger-color--200);
|
||||
color: var(--pf-global--danger-color--200);
|
||||
}
|
||||
|
||||
/* End Firewall specific CSS */
|
||||
|
|
|
|||
|
|
@ -5,254 +5,254 @@
|
|||
|
||||
/* Style the list cards as ct-cards */
|
||||
.pf-c-page__main-section .pf-c-card {
|
||||
@extend .ct-card;
|
||||
@extend .ct-card;
|
||||
}
|
||||
|
||||
.pf-c-table tr:nth-child(1) {
|
||||
> td, th {
|
||||
--pf-c-table--cell--PaddingTop: 0.5rem;
|
||||
--pf-c-table--cell--PaddingBottom: 0.5rem;
|
||||
> td, th {
|
||||
--pf-c-table--cell--PaddingTop: 0.5rem;
|
||||
--pf-c-table--cell--PaddingBottom: 0.5rem;
|
||||
|
||||
padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);
|
||||
}
|
||||
padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);
|
||||
}
|
||||
}
|
||||
|
||||
.kpatches-labelgroup ul.pf-c-label-group__list,
|
||||
.kpatches-labelgroup li.pf-c-label-group__list-item:last-child, {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pk-updates--header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 0 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 0 1rem;
|
||||
|
||||
&--actions {
|
||||
> .pf-c-button,
|
||||
> .btn-group {
|
||||
margin: 5px 5px 0 0;
|
||||
&--actions {
|
||||
> .pf-c-button,
|
||||
> .btn-group {
|
||||
margin: 5px 5px 0 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
.pk-updates--header--auto {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.pk-updates--header--auto {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
// Make header's content bold
|
||||
.pf-c-table tr:nth-child(1) td:nth-child(2) {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
}
|
||||
|
||||
.ct-table tr {
|
||||
.severity-icon {
|
||||
margin-right: var(--pf-global--spacer--xs);
|
||||
.severity-icon {
|
||||
margin-right: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
td.changelog {
|
||||
vertical-align: top;
|
||||
|
||||
* {
|
||||
display: inline;
|
||||
font: inherit;
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
td.changelog {
|
||||
vertical-align: top;
|
||||
|
||||
* {
|
||||
display: inline;
|
||||
font: inherit;
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&, p {
|
||||
max-width: 60vw;
|
||||
margin-bottom: 0; // counter-act <Markdown>
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&, p {
|
||||
max-width: 60vw;
|
||||
margin-bottom: 0; // counter-act <Markdown>
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
th:last-child,
|
||||
td.changelog:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
th:last-child,
|
||||
td.changelog:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.severity-critical {
|
||||
color: #a30000;
|
||||
color: #a30000;
|
||||
}
|
||||
|
||||
.severity-important {
|
||||
color: #ec7a08;
|
||||
color: #ec7a08;
|
||||
}
|
||||
|
||||
.severity-low {
|
||||
color: var(--ct-color-subtle-copy);
|
||||
color: var(--ct-color-subtle-copy);
|
||||
}
|
||||
|
||||
div.changelog {
|
||||
max-height: 20em;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
max-height: 20em;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* Hide changelog summaries in narrow widths */
|
||||
@media screen and (max-width: 80ch) {
|
||||
table.ct-table {
|
||||
/* Hide changelog header (there's no class) & data */
|
||||
thead th:last-child,
|
||||
td.changelog {
|
||||
display: none;
|
||||
}
|
||||
table.ct-table {
|
||||
/* Hide changelog header (there's no class) & data */
|
||||
thead th:last-child,
|
||||
td.changelog {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* don't let the install progress bar get too wide */
|
||||
.progress-main-view {
|
||||
max-width: 60rem;
|
||||
margin: 10ex auto 0;
|
||||
max-width: 60rem;
|
||||
margin: 10ex auto 0;
|
||||
|
||||
.pf-l-grid {
|
||||
align-items: end;
|
||||
}
|
||||
.pf-l-grid {
|
||||
align-items: end;
|
||||
}
|
||||
}
|
||||
|
||||
/* workaround font not supporting tabular numbers yet https://github.com/cockpit-project/cockpit/issues/15090 */
|
||||
.pf-c-progress__status {
|
||||
min-width: 3ch;
|
||||
min-width: 3ch;
|
||||
}
|
||||
|
||||
/* Add some space between the spinner and the text */
|
||||
.progress-description > svg {
|
||||
margin-right: var(--pf-global--spacer--sm);
|
||||
margin-right: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.flow-list-blank-slate {
|
||||
margin: 0 auto;
|
||||
max-width: 69rem;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
max-width: 69rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flow-list {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
li {
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
li {
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
width: 22rem;
|
||||
padding: 0 1ex 0 0;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
width: 22rem;
|
||||
padding: 0 1ex 0 0;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.update-log {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding-right: 3ex;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
padding-right: 3ex;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
}
|
||||
td {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.update-log-content {
|
||||
margin: 0 10ex;
|
||||
height: 13em;
|
||||
overflow-y: auto;
|
||||
margin: 0 10ex;
|
||||
height: 13em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
table.header-buttons {
|
||||
margin-bottom: 20px; /* replacement for h2's margin-bottom */
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
margin-bottom: 20px; /* replacement for h2's margin-bottom */
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 4rem 0 0; /* vertical default ones break vertical alignment */
|
||||
}
|
||||
h2 {
|
||||
margin: 0 4rem 0 0; /* vertical default ones break vertical alignment */
|
||||
}
|
||||
}
|
||||
|
||||
#auto-update-day {
|
||||
max-width: 10rem;
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
#auto-update-time {
|
||||
max-width: 7rem;
|
||||
max-width: 7rem;
|
||||
}
|
||||
|
||||
.auto-update-group {
|
||||
// Add spacing between rows for when the flex items wrap
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
// Add spacing between rows for when the flex items wrap
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.pk-updates .pf-c-description-list + div {
|
||||
padding-top: var(--pf-global--spacer--md);
|
||||
padding-top: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.restart-services-modal-body {
|
||||
padding: 1em 0;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.pf-c-content ul {
|
||||
list-style-type: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.updates-history {
|
||||
// Constrain time's width
|
||||
.history-time {
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
// Constrain time's width
|
||||
.history-time {
|
||||
width: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Fix alignment of the package count's icon
|
||||
.list-view-pf-additional-info-item {
|
||||
align-items: baseline;
|
||||
// Fix alignment of the package count's icon
|
||||
.list-view-pf-additional-info-item {
|
||||
align-items: baseline;
|
||||
|
||||
> svg {
|
||||
margin-right: 1ex;
|
||||
}
|
||||
> svg {
|
||||
margin-right: 1ex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updates-success-table {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.update-success-actions > button {
|
||||
margin: 0.25rem 0 0.25rem 0.5rem;
|
||||
margin: 0.25rem 0 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.update-success-table-title {
|
||||
padding-left: 0.5em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
.cockpit-update-warning {
|
||||
margin-right: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.cockpit-update-warning-icon {
|
||||
margin-right: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.cockpit-update-warning-text {
|
||||
color: var(--pf-global--warning-color--200);
|
||||
color: var(--pf-global--warning-color--200);
|
||||
}
|
||||
|
||||
.autoupdates-card-error {
|
||||
margin-bottom: var(--pf-global--spacer--md);
|
||||
margin-bottom: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.ct-info-circle {
|
||||
color: var(--pf-global--info-color--100);
|
||||
color: var(--pf-global--info-color--100);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.mem-graph {
|
||||
height: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#spawn-output {
|
||||
min-width: 70ex;
|
||||
min-height: 1rem;
|
||||
max-height: 20rem;
|
||||
min-width: 70ex;
|
||||
min-height: 1rem;
|
||||
max-height: 20rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,47 +21,47 @@
|
|||
@use "page";
|
||||
|
||||
#app .pf-c-card {
|
||||
@extend .ct-card;
|
||||
@extend .ct-card;
|
||||
}
|
||||
|
||||
.setroubleshoot-log {
|
||||
font-family: monospace;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.setroubleshoot-progress-spinner {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.setroubleshoot-progress-message {
|
||||
vertical-align: top;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Table cells should collapse on mobile */
|
||||
.ct-table.pf-c-table tbody > tr > * {
|
||||
word-break: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.selinux-details {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
|
||||
|
||||
> div:first-child {
|
||||
width: 70%;
|
||||
flex: auto;
|
||||
}
|
||||
> div:first-child {
|
||||
width: 70%;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
+ hr {
|
||||
margin-top: var(--pf-global--spacer--sm);
|
||||
}
|
||||
+ hr {
|
||||
margin-top: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.pf-c-expandable-section__content {
|
||||
margin-top: unset;
|
||||
}
|
||||
.pf-c-expandable-section__content {
|
||||
margin-top: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.selinux-details textarea {
|
||||
margin-top: var(--pf-global--spacer--xs);
|
||||
resize: none;
|
||||
margin-top: var(--pf-global--spacer--xs);
|
||||
resize: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
#credentials-modal {
|
||||
// SSH keys don't have spaces, allow these two wrap
|
||||
.pf-c-clipboard-copy__expandable-content {
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
// SSH keys don't have spaces, allow these two wrap
|
||||
.pf-c-clipboard-copy__expandable-content {
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
|
||||
th[data-label="Name"] {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
}
|
||||
th[data-label="Name"] {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
}
|
||||
|
||||
td[data-label="Toggle"] {
|
||||
width: 1%;
|
||||
}
|
||||
td[data-label="Toggle"] {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
// Remove excess padding from compact tables toggles
|
||||
// And adjust the padding to left align the toggles with the card header
|
||||
.pf-c-table {
|
||||
.pf-c-table__toggle {
|
||||
padding-left: 0;
|
||||
}
|
||||
// Remove excess padding from compact tables toggles
|
||||
// And adjust the padding to left align the toggles with the card header
|
||||
.pf-c-table {
|
||||
.pf-c-table__toggle {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1114
pkg/shell/nav.scss
1114
pkg/shell/nav.scss
File diff suppressed because it is too large
Load Diff
|
|
@ -24,59 +24,59 @@
|
|||
@use "nav.scss";
|
||||
|
||||
:root {
|
||||
--ct-color-host-accent: var(--pf-global--active-color--100);
|
||||
--ct-color-host-accent: var(--pf-global--active-color--100);
|
||||
}
|
||||
|
||||
/* Hacks on top for now */
|
||||
|
||||
html.index-page body {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hide-before::before {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#machine-change-auth > p {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
// Fix fingerprint layout
|
||||
.add-host-fingerprint {
|
||||
margin-top: var(--pf-global--spacer--md);
|
||||
margin-top: var(--pf-global--spacer--md);
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
vertical-align: middle !important;
|
||||
td {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
vertical-align: middle !important;
|
||||
|
||||
&:first-child {
|
||||
padding-right: var(--pf-global--spacer--md);
|
||||
}
|
||||
&:first-child {
|
||||
padding-right: var(--pf-global--spacer--md);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.machine-key {
|
||||
margin: 0;
|
||||
white-space: pre-line;
|
||||
padding: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
|
||||
margin: 0;
|
||||
white-space: pre-line;
|
||||
padding: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.login-setup-checkbox-wrapper {
|
||||
// Use a flex layout to better vertically align the contents to the grid
|
||||
display: flex;
|
||||
// Use a flex layout to better vertically align the contents to the grid
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#edit-machine-port {
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#connecting {
|
||||
height: 100%;
|
||||
background-color: var(--ct-global--palette--black-250);
|
||||
text-align: center;
|
||||
padding-top: 120px;
|
||||
height: 100%;
|
||||
background-color: var(--ct-global--palette--black-250);
|
||||
text-align: center;
|
||||
padding-top: 120px;
|
||||
}
|
||||
|
||||
/* System information */
|
||||
|
|
@ -84,23 +84,23 @@ html.index-page body {
|
|||
#systime-date-input,
|
||||
#systime-time-hours,
|
||||
#systime-time-minutes {
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* index page */
|
||||
|
||||
.display-language-modal {
|
||||
/* Do not let the language menu expand to the end of the page */
|
||||
.pf-c-menu__content {
|
||||
max-height: 20rem;
|
||||
overflow: auto;
|
||||
}
|
||||
/* Do not let the language menu expand to the end of the page */
|
||||
.pf-c-menu__content {
|
||||
max-height: 20rem;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
iframe.container-frame {
|
||||
display: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
display: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Page layout
|
||||
|
|
@ -109,112 +109,112 @@ $phone: 767px;
|
|||
$desktop: $phone + 1px;
|
||||
|
||||
.page {
|
||||
--nav-width: 15rem;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
--nav-width: 15rem;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// Set masthead and toolbar to transparent, so the background shows through
|
||||
// (including the accent line)
|
||||
// Set masthead and toolbar to transparent, so the background shows through
|
||||
// (including the accent line)
|
||||
|
||||
.pf-c-masthead {
|
||||
--pf-c-masthead--BackgroundColor: transparent;
|
||||
}
|
||||
|
||||
.pf-c-toolbar {
|
||||
--pf-c-toolbar--BackgroundColor: transparent;
|
||||
}
|
||||
|
||||
@media (max-width: $phone) {
|
||||
grid-template-areas: "main main main" "sidebar switcher header";
|
||||
grid-template-rows: 1fr 4rem;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
overflow: hidden;
|
||||
|
||||
.area-ct-subnav {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
grid-area: sidebar;
|
||||
display: flex;
|
||||
background: var(--pf-global--BackgroundColor--dark-100);
|
||||
}
|
||||
|
||||
> .header,
|
||||
> .navbar,
|
||||
> .sidebar-toggle {
|
||||
// Line on bottom, Base color (with subtle glow)
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--ct-color-host-accent),
|
||||
var(--ct-color-host-accent) 0.1875rem,
|
||||
transparent 0.1875rem
|
||||
),
|
||||
linear-gradient(
|
||||
to top,
|
||||
var(--ct-color-host-accent) -1.5rem,
|
||||
var(--pf-global--BackgroundColor--dark-100) 0.75rem
|
||||
);
|
||||
}
|
||||
|
||||
// Remove excess padding from masthead in mobile
|
||||
.pf-c-masthead {
|
||||
--pf-c-masthead--BackgroundColor: transparent;
|
||||
--pf-c-masthead--inset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $desktop) {
|
||||
grid-template-areas: "switcher header" "sidebar main";
|
||||
grid-template-rows: max-content 1fr;
|
||||
grid-template-columns: minmax(min-content, var(--nav-width)) 1fr;
|
||||
|
||||
> .navbar {
|
||||
max-width: var(--nav-width);
|
||||
}
|
||||
|
||||
.pf-c-toolbar {
|
||||
--pf-c-toolbar--BackgroundColor: transparent;
|
||||
.sidebar {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
@media (max-width: $phone) {
|
||||
grid-template-areas: "main main main" "sidebar switcher header";
|
||||
grid-template-rows: 1fr 4rem;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
overflow: hidden;
|
||||
|
||||
.area-ct-subnav {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
grid-area: sidebar;
|
||||
display: flex;
|
||||
background: var(--pf-global--BackgroundColor--dark-100);
|
||||
}
|
||||
|
||||
> .header,
|
||||
> .navbar,
|
||||
> .sidebar-toggle {
|
||||
// Line on bottom, Base color (with subtle glow)
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
var(--ct-color-host-accent),
|
||||
var(--ct-color-host-accent) 0.1875rem,
|
||||
transparent 0.1875rem
|
||||
),
|
||||
linear-gradient(
|
||||
to top,
|
||||
var(--ct-color-host-accent) -1.5rem,
|
||||
var(--pf-global--BackgroundColor--dark-100) 0.75rem
|
||||
);
|
||||
}
|
||||
|
||||
// Remove excess padding from masthead in mobile
|
||||
.pf-c-masthead {
|
||||
--pf-c-masthead--inset: 0;
|
||||
}
|
||||
.sidebar-toggle {
|
||||
grid-area: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: $desktop) {
|
||||
grid-template-areas: "switcher header" "sidebar main";
|
||||
grid-template-rows: max-content 1fr;
|
||||
grid-template-columns: minmax(min-content, var(--nav-width)) 1fr;
|
||||
|
||||
> .navbar {
|
||||
max-width: var(--nav-width);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
grid-area: sidebar;
|
||||
}
|
||||
|
||||
.sidebar-toggle {
|
||||
grid-area: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .header {
|
||||
// Shadow to the left, Line on top, Base color (with subtle glow)
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--pf-global--BackgroundColor--dark-100) -1rem,
|
||||
transparent 1rem
|
||||
),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--ct-color-host-accent),
|
||||
var(--ct-color-host-accent) 0.1875rem,
|
||||
transparent 0.1875rem
|
||||
),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--ct-color-host-accent) -1.5rem,
|
||||
var(--pf-global--BackgroundColor--dark-100) 0.75rem
|
||||
);
|
||||
}
|
||||
> .header {
|
||||
// Shadow to the left, Line on top, Base color (with subtle glow)
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--pf-global--BackgroundColor--dark-100) -1rem,
|
||||
transparent 1rem
|
||||
),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--ct-color-host-accent),
|
||||
var(--ct-color-host-accent) 0.1875rem,
|
||||
transparent 0.1875rem
|
||||
),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--ct-color-host-accent) -1.5rem,
|
||||
var(--pf-global--BackgroundColor--dark-100) 0.75rem
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Shrink nav for VMs @ 1024×768 (and below)
|
||||
@media (max-width: 1024px) and (max-height: 768px) and (orientation: landscape) {
|
||||
--nav-width: 14rem;
|
||||
}
|
||||
// Shrink nav for VMs @ 1024×768 (and below)
|
||||
@media (max-width: 1024px) and (max-height: 768px) and (orientation: landscape) {
|
||||
--nav-width: 14rem;
|
||||
}
|
||||
|
||||
.area-ct-content {
|
||||
grid-area: main;
|
||||
}
|
||||
.area-ct-content {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
}
|
||||
.header {
|
||||
grid-area: header;
|
||||
}
|
||||
}
|
||||
|
||||
.hostkey-fingerprint {
|
||||
|
|
@ -239,10 +239,10 @@ $desktop: $phone + 1px;
|
|||
|
||||
/* Alert fixups */
|
||||
.modal-content .pf-c-alert {
|
||||
text-align: left;
|
||||
margin-bottom: 24px;
|
||||
text-align: left;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.early-failure {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,22 +4,22 @@
|
|||
@import "global-variables";
|
||||
|
||||
.table-row-action {
|
||||
text-align: right;
|
||||
white-space: nowrap !important;
|
||||
text-align: right;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: $pf-global--breakpoint--md - 1) {
|
||||
.show-only-when-wide {
|
||||
display: none !important;
|
||||
}
|
||||
.show-only-when-wide {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $pf-global--breakpoint--md) {
|
||||
.show-only-when-narrow {
|
||||
display: none !important;
|
||||
}
|
||||
.show-only-when-narrow {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,415 +24,415 @@
|
|||
@import "@patternfly/patternfly/utilities/Text/text.scss";
|
||||
|
||||
#storage .pf-c-card {
|
||||
@extend .ct-card;
|
||||
@extend .ct-card;
|
||||
}
|
||||
|
||||
#storage .pf-l-gallery {
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
}
|
||||
|
||||
#storage-detail .pf-c-page__main-section,
|
||||
#storage-detail .pf-c-page__main-nav {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#storage .create-storage {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1560px) {
|
||||
#storage .create-storage .col-lg-6 {
|
||||
width: 100%;
|
||||
}
|
||||
#storage .create-storage .col-lg-6 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#storage .create-storage button {
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#storage .storage-sidebar table {
|
||||
table-layout: fixed;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
#storage .ct-table th {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
}
|
||||
|
||||
#storage .storage-sidebar table td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dialog-select-row-table {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dialog-select-row-table td,
|
||||
.dialog-select-row-table td:first-child {
|
||||
text-align: left;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
vertical-align: top;
|
||||
white-space: default;
|
||||
color: black;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-top: 1px solid #d1d1d1;
|
||||
border-bottom: 1px solid #d1d1d1;
|
||||
text-align: left;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
vertical-align: top;
|
||||
white-space: default;
|
||||
color: black;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-top: 1px solid #d1d1d1;
|
||||
border-bottom: 1px solid #d1d1d1;
|
||||
}
|
||||
|
||||
.dialog-select-row-table td:first-child {
|
||||
padding-left: 0.75em;
|
||||
border-left: 1px solid #d1d1d1;
|
||||
padding-left: 0.75em;
|
||||
border-left: 1px solid #d1d1d1;
|
||||
}
|
||||
|
||||
.dialog-select-row-table td:last-child {
|
||||
padding-right: 0.75em;
|
||||
border-right: 1px solid #d1d1d1;
|
||||
padding-right: 0.75em;
|
||||
border-right: 1px solid #d1d1d1;
|
||||
}
|
||||
|
||||
.dialog-select-row-table th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: var(--pf-global--palette--black-800);
|
||||
padding: 0;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: var(--pf-global--palette--black-800);
|
||||
padding: 0;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.dialog-select-row-table th:first-child {
|
||||
padding-left: 0.75em;
|
||||
padding-left: 0.75em;
|
||||
}
|
||||
|
||||
.dialog-select-row-table th:last-child {
|
||||
padding-right: 0.75em;
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
|
||||
td.storage-icon {
|
||||
width: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
div.progress {
|
||||
width: 100%;
|
||||
height: var(--pf-global--FontSize-xs);
|
||||
width: 100%;
|
||||
height: var(--pf-global--FontSize-xs);
|
||||
}
|
||||
|
||||
#detail-header div.progress {
|
||||
min-width: 250px;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
#storage-detail .ct-table {
|
||||
border-top: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
|
||||
border-top: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
|
||||
}
|
||||
|
||||
td.usage-text {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
td.job-description {
|
||||
width: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
td.job-status {
|
||||
width: 15%;
|
||||
text-align: right;
|
||||
width: 15%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
td.job-action {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.detail-jobs {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.storage-graph {
|
||||
height: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.content-nav-item-warning:first-child {
|
||||
padding-right: var(--pf-global--spacer--sm);
|
||||
padding-right: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.content-action {
|
||||
text-align: right;
|
||||
white-space: nowrap !important;
|
||||
text-align: right;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.dialog-item-tooltip {
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modal-footer-teardown {
|
||||
text-align: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pf-c-modal-box__body table {
|
||||
--pf-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
|
||||
--pf-c-table--m-compact--cell--first-last-child--PaddingLeft: 0;
|
||||
}
|
||||
|
||||
* + .modal-footer-teardown {
|
||||
padding-top: var(--pf-global--spacer--xl);
|
||||
padding-top: var(--pf-global--spacer--xl);
|
||||
}
|
||||
|
||||
tr[class*="content-level-"] {
|
||||
--multiplier: 0;
|
||||
--offset: calc(var(--pf-global--spacer--lg) * var(--multiplier));
|
||||
--multiplier: 0;
|
||||
--offset: calc(var(--pf-global--spacer--lg) * var(--multiplier));
|
||||
|
||||
// Move the button over
|
||||
> .pf-c-table__toggle > button {
|
||||
position: relative;
|
||||
left: var(--offset);
|
||||
}
|
||||
// Move the button over
|
||||
> .pf-c-table__toggle > button {
|
||||
position: relative;
|
||||
left: var(--offset);
|
||||
}
|
||||
|
||||
// Add space for the button and offset
|
||||
> .pf-c-table__toggle + td {
|
||||
padding-left: calc(var(--offset) + var(--pf-c-table--cell--PaddingLeft));
|
||||
}
|
||||
// Add space for the button and offset
|
||||
> .pf-c-table__toggle + td {
|
||||
padding-left: calc(var(--offset) + var(--pf-c-table--cell--PaddingLeft));
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
tr.content-level-#{$i} {
|
||||
--multiplier: #{$i};
|
||||
}
|
||||
tr.content-level-#{$i} {
|
||||
--multiplier: #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
.tab-actions {
|
||||
float: right;
|
||||
margin-top: -15px;
|
||||
float: right;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.tab-actions button {
|
||||
margin-left: 0.3em;
|
||||
margin-left: 0.3em;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
color: var(--pf-global--palette--light-blue-200);
|
||||
text-decoration: none;
|
||||
cursor: not-allowed;
|
||||
color: var(--pf-global--palette--light-blue-200);
|
||||
text-decoration: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tab-row-actions {
|
||||
display: inline-block;
|
||||
margin-left: 2em;
|
||||
display: inline-block;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
/* Make tooltips inside tables visible.
|
||||
*/
|
||||
|
||||
td.storage-action {
|
||||
overflow: visible !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.network-keys-table td {
|
||||
vertical-align: baseline;
|
||||
padding-right: 10px;
|
||||
vertical-align: baseline;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.combobox-container .input-group {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Prevent long names from sticking out of dialog titles
|
||||
*/
|
||||
|
||||
.modal-title {
|
||||
word-break: break-all;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.just-installed {
|
||||
margin-right: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.faded {
|
||||
transition: opacity 1s, visibility 1s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s, visibility 1s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.widest-title {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.radio-horizontal input[type="radio"] {
|
||||
margin-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.radio-horizontal label {
|
||||
margin-right: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.key-slot-panel-remaining {
|
||||
margin-right: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.sigkey-heading {
|
||||
color: var(--pf-global--Color--dark-100);
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
margin: var(--pf-global--spacer--md) 0 0;
|
||||
color: var(--pf-global--Color--dark-100);
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
margin: var(--pf-global--spacer--md) 0 0;
|
||||
}
|
||||
|
||||
.sigkey-hash {
|
||||
font-family: monospace;
|
||||
font-size: 140%;
|
||||
font-family: monospace;
|
||||
font-size: 140%;
|
||||
}
|
||||
|
||||
.pf-c-modal-box h3 {
|
||||
margin-top: 0;
|
||||
line-height: 24px;
|
||||
margin-top: 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.progressive-disclosure .form-group {
|
||||
padding-left: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.progressive-disclosure .form-group > :first-child {
|
||||
margin-left: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
.progressive-disclosure .form-group > :not(:first-child) {
|
||||
margin-top: 0.5em;
|
||||
animation: showRemovalDisclosure ease-in-out 200ms;
|
||||
margin-top: 0.5em;
|
||||
animation: showRemovalDisclosure ease-in-out 200ms;
|
||||
}
|
||||
|
||||
@keyframes showRemovalDisclosure {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top left;
|
||||
}
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scaleY(0);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-modal-box .slot-warning {
|
||||
color: var(--pf-global--danger-color--200);
|
||||
color: var(--pf-global--danger-color--200);
|
||||
}
|
||||
|
||||
.pf-c-modal-box .key-source .radio-horizontal {
|
||||
margin-bottom: 2ex;
|
||||
margin-bottom: 2ex;
|
||||
}
|
||||
|
||||
// This is needs to avoid showing scrollbar in dialog
|
||||
.size-slider {
|
||||
padding-bottom: var(--pf-global--spacer--xs);
|
||||
padding-bottom: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
/* Overview side panels */
|
||||
|
||||
.sidepanel-row {
|
||||
padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg);
|
||||
border-top: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
|
||||
padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg);
|
||||
border-top: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
|
||||
}
|
||||
|
||||
.sidepanel-row.pf-c-empty-state {
|
||||
.pf-c-empty-state__body {
|
||||
margin-top: 0;
|
||||
}
|
||||
.pf-c-empty-state__body {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidepanel-row:not(.pf-c-empty-state):hover {
|
||||
color: var(--ct-color-list-hover-text);
|
||||
cursor: pointer;
|
||||
color: var(--ct-color-list-hover-text);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidepanel-row-name {
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
}
|
||||
|
||||
.sidepanel-row-info {
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
max-width: 50ch;
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
max-width: 50ch;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
position: static;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.storage_alert_action_buttons button {
|
||||
margin: 0.5rem 0.2rem 0.2rem 0;
|
||||
margin: 0.5rem 0.2rem 0.2rem 0;
|
||||
}
|
||||
|
||||
// We wrap the data list row with a label to make checkboxes clickable from the whole row
|
||||
// we need this HACK in order to make alignRight property take effect
|
||||
.data-list-row-checkbox-label {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.crypto-keyslots-list {
|
||||
border: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
// So that "Stored passphrase" fits
|
||||
.pf-c-description-list.ct-wide-labels {
|
||||
--pf-c-description-list--m-horizontal__term--width: minmax(0, 18ch);
|
||||
--pf-c-description-list--m-horizontal__term--width: minmax(0, 18ch);
|
||||
}
|
||||
|
||||
.pf-c-description-list .pf-c-progress {
|
||||
max-width: 30ch;
|
||||
max-width: 30ch;
|
||||
}
|
||||
|
||||
#mounts .pf-c-progress__measure, #nfs-mounts .pf-c-progress__measure, #detail-content .pf-c-progress__measure {
|
||||
min-width: 7rem;
|
||||
min-width: 7rem;
|
||||
}
|
||||
|
||||
td.ct-text-align-right {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Hatched effect for progressbars that are parts of a group, but not the main
|
||||
.ct-progress-other {
|
||||
// Use the page's default background color
|
||||
--bg-light: var(--pf-global--BackgroundColor--100);
|
||||
// Alternate with the used color of the progress bar
|
||||
--bg-dark: var(--pf-c-progress__indicator--BackgroundColor);
|
||||
// Repeat a gradient with hard stops, a perfect slant, and a consistency
|
||||
// with all "other" hatched backgrounds (fixed, so they repeat the same)
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--bg-light),
|
||||
var(--bg-light) 25%,
|
||||
var(--bg-dark) 25%,
|
||||
var(--bg-dark) 50%,
|
||||
var(--bg-light) 50%
|
||||
) top left fixed;
|
||||
background-size: var(--pf-global--spacer--sm) var(--pf-global--spacer--sm);
|
||||
// Overlay at 1/3 to mix the light and dark against the trough color
|
||||
opacity: 0.333;
|
||||
// Use the page's default background color
|
||||
--bg-light: var(--pf-global--BackgroundColor--100);
|
||||
// Alternate with the used color of the progress bar
|
||||
--bg-dark: var(--pf-c-progress__indicator--BackgroundColor);
|
||||
// Repeat a gradient with hard stops, a perfect slant, and a consistency
|
||||
// with all "other" hatched backgrounds (fixed, so they repeat the same)
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
var(--bg-light),
|
||||
var(--bg-light) 25%,
|
||||
var(--bg-dark) 25%,
|
||||
var(--bg-dark) 50%,
|
||||
var(--bg-light) 50%
|
||||
) top left fixed;
|
||||
background-size: var(--pf-global--spacer--sm) var(--pf-global--spacer--sm);
|
||||
// Overlay at 1/3 to mix the light and dark against the trough color
|
||||
opacity: 0.333;
|
||||
}
|
||||
|
||||
.ct-warning-text {
|
||||
color: var(--pf-global--warning-color--200);
|
||||
color: var(--pf-global--warning-color--200);
|
||||
}
|
||||
|
||||
td button.pf-m-link {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (max-width: $pf-global--breakpoint--md - 1) {
|
||||
.show-only-when-wide {
|
||||
display: none;
|
||||
}
|
||||
.show-only-when-wide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $pf-global--breakpoint--md) {
|
||||
.show-only-when-narrow {
|
||||
display: none;
|
||||
}
|
||||
.show-only-when-narrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,29 +2,29 @@
|
|||
@use "page";
|
||||
|
||||
#hwinfo {
|
||||
/* Style the list cards as ct-cards */
|
||||
.pf-c-page__main-section .pf-c-card {
|
||||
@extend .ct-card;
|
||||
}
|
||||
/* Style the list cards as ct-cards */
|
||||
.pf-c-page__main-section .pf-c-card {
|
||||
@extend .ct-card;
|
||||
}
|
||||
|
||||
.pf-l-gallery {
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
}
|
||||
.pf-l-gallery {
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
#hwinfo-system-info-list {
|
||||
/* When the flex wraps make have the same gap as description list items have between them */
|
||||
row-gap: 1rem;
|
||||
/* When the flex wraps make have the same gap as description list items have between them */
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.nosmt-read-more-link {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nosmt-heading {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
}
|
||||
|
||||
.cpu-mitigations-dialog-info {
|
||||
margin-bottom: var(--pf-global--spacer--md);
|
||||
margin-bottom: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,139 +7,139 @@
|
|||
|
||||
// https://github.com/patternfly/patternfly-react/issues/5993
|
||||
.pf-c-popover.pf-m-width-auto {
|
||||
--pf-c-popover--MaxWidth: min(300px, 90%);
|
||||
--pf-c-popover--MaxWidth: min(300px, 90%);
|
||||
}
|
||||
|
||||
#journal {
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
.cockpit-log-panel {
|
||||
border: none;
|
||||
}
|
||||
.cockpit-log-panel {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.pf-c-page__main {
|
||||
// Constrain page to viewport height, so journal can overflow
|
||||
max-height: 100vh;
|
||||
}
|
||||
.pf-c-page__main {
|
||||
// Constrain page to viewport height, so journal can overflow
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
// Static width for the service selector as it likes to resize a lot while loading
|
||||
#journal-identifier-menu ul.pf-c-select__menu {
|
||||
width: 10rem;
|
||||
}
|
||||
// Static width for the service selector as it likes to resize a lot while loading
|
||||
#journal-identifier-menu ul.pf-c-select__menu {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
// Long names without spaces do not wrap; triggers overflow and overlaps with check icon
|
||||
#journal-identifier-menu .pf-c-select__menu-item {
|
||||
white-space: normal;
|
||||
}
|
||||
// Long names without spaces do not wrap; triggers overflow and overlaps with check icon
|
||||
#journal-identifier-menu .pf-c-select__menu-item {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
#log-details {
|
||||
.pf-l-gallery {
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
.pf-l-gallery {
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
}
|
||||
|
||||
.pf-c-page__main-breadcrumb {
|
||||
padding: var(--pf-global--gutter);
|
||||
}
|
||||
|
||||
.pf-c-card__title,
|
||||
.multiline {
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
.multiline {
|
||||
font-family: monospace, monospace;
|
||||
}
|
||||
|
||||
.pf-l-split {
|
||||
padding-bottom: var(--pf-global--gutter);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pf-c-description-list {
|
||||
--pf-c-description-list--m-horizontal__term--width: 25ch;
|
||||
}
|
||||
|
||||
// For abrt log details: add some gutter between the tabs and their content
|
||||
.pf-c-tab-content > .pf-c-description-list {
|
||||
padding-top: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.table-hide-labels {
|
||||
[data-label] {
|
||||
display: revert;
|
||||
}
|
||||
|
||||
.pf-c-page__main-breadcrumb {
|
||||
padding: var(--pf-global--gutter);
|
||||
[data-label]::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-card__title,
|
||||
.multiline {
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
.multiline {
|
||||
font-family: monospace, monospace;
|
||||
}
|
||||
|
||||
.pf-l-split {
|
||||
padding-bottom: var(--pf-global--gutter);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pf-c-description-list {
|
||||
--pf-c-description-list--m-horizontal__term--width: 25ch;
|
||||
}
|
||||
|
||||
// For abrt log details: add some gutter between the tabs and their content
|
||||
.pf-c-tab-content > .pf-c-description-list {
|
||||
padding-top: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.table-hide-labels {
|
||||
[data-label] {
|
||||
display: revert;
|
||||
}
|
||||
|
||||
[data-label]::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Let the description list set the color, not the wrapper accordion component
|
||||
.pf-c-accordion__expanded-content {
|
||||
color: unset;
|
||||
}
|
||||
// Let the description list set the color, not the wrapper accordion component
|
||||
.pf-c-accordion__expanded-content {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
#journal-box {
|
||||
flex: auto;
|
||||
flex: auto;
|
||||
|
||||
.panel-heading {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
color: var(--pf-global--Color--300);
|
||||
background-color: var(--pf-global--BackgroundColor--100);
|
||||
border: none;
|
||||
font-size: var(--pf-global--FontSize--md);
|
||||
font-family: var(--pf-global--FontFamily--heading--sans-serif);
|
||||
font-weight: var(--pf-global--FontWeight--semi-bold);
|
||||
padding: var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--sm);
|
||||
}
|
||||
.panel-heading {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
color: var(--pf-global--Color--300);
|
||||
background-color: var(--pf-global--BackgroundColor--100);
|
||||
border: none;
|
||||
font-size: var(--pf-global--FontSize--md);
|
||||
font-family: var(--pf-global--FontFamily--heading--sans-serif);
|
||||
font-weight: var(--pf-global--FontWeight--semi-bold);
|
||||
padding: var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* Set min width for services in the journal view */
|
||||
#journal .cockpit-logline {
|
||||
--log-service-min: 8rem;
|
||||
--log-service-min: 8rem;
|
||||
}
|
||||
|
||||
#accordion-markup {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.pf-c-toolbar {
|
||||
--pf-c-toolbar--BackgroundColor: var(--pf-c-page__main-section--BackgroundColor);
|
||||
--pf-c-toolbar--BackgroundColor: var(--pf-c-page__main-section--BackgroundColor);
|
||||
|
||||
// Make toolbar stretch to all the available space and wrap up to two lines
|
||||
--pf-c-toolbar--PaddingTop: 0;
|
||||
--pf-c-toolbar--PaddingBottom: 0;
|
||||
// Make toolbar stretch to all the available space and wrap up to two lines
|
||||
--pf-c-toolbar--PaddingTop: 0;
|
||||
--pf-c-toolbar--PaddingBottom: 0;
|
||||
|
||||
.pf-c-toolbar__group {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
.pf-c-toolbar__group {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.pf-c-toolbar__group:nth-child(3) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
// Make text filter stretch to all the available space
|
||||
.pf-c-toolbar__item.text-search, #journal-grep {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.text-help {
|
||||
padding-left: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
// Hide filters from advanced search dropdown entries which already exist in the toolbar
|
||||
#journal-grep .pf-c-panel__main-body {
|
||||
.pf-c-form__group:nth-child(5), .pf-c-form__group:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-toolbar__group:nth-child(3) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
// Make text filter stretch to all the available space
|
||||
.pf-c-toolbar__item.text-search, #journal-grep {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.text-help {
|
||||
padding-left: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
// Hide filters from advanced search dropdown entries which already exist in the toolbar
|
||||
#journal-grep .pf-c-panel__main-body {
|
||||
.pf-c-form__group:nth-child(5), .pf-c-form__group:nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pf-c-toolbar__expandable-content.pf-m-expanded .pf-c-divider {
|
||||
display: none;
|
||||
}
|
||||
.pf-c-toolbar__expandable-content.pf-m-expanded .pf-c-divider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
#system_information_hostname_text + span {
|
||||
font: inherit;
|
||||
margin-left: 0.5em;
|
||||
font: inherit;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
#systime-date-input {
|
||||
width: 10em;
|
||||
margin-right: 0.5em;
|
||||
width: 10em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
#systime-time-hours,
|
||||
#systime-time-minutes {
|
||||
display: inline;
|
||||
width: 3em;
|
||||
display: inline;
|
||||
width: 3em;
|
||||
}
|
||||
|
||||
.system-configuration .pf-c-button.pf-m-link:disabled {
|
||||
color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.crypto-policies-health-card-icon {
|
||||
color: var(--pf-global--Color--200);
|
||||
color: var(--pf-global--Color--200);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
}
|
||||
|
||||
.spinner {
|
||||
margin-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.pf-c-spinner {
|
||||
// PF's spinner is 18px while the icons are 16px,
|
||||
// so redefine it here to make text to the right line up
|
||||
--pf-c-spinner--m-md--diameter: 16px;
|
||||
// PF's spinner is 18px while the icons are 16px,
|
||||
// so redefine it here to make text to the right line up
|
||||
--pf-c-spinner--m-md--diameter: 16px;
|
||||
}
|
||||
|
||||
> :not(a):last-child {
|
||||
|
|
|
|||
|
|
@ -1,61 +1,61 @@
|
|||
.insights-icon {
|
||||
width: auto;
|
||||
height: 1.25rem;
|
||||
flex-basis: 22px;
|
||||
margin-right: 0.5rem;
|
||||
justify-self: center;
|
||||
width: auto;
|
||||
height: 1.25rem;
|
||||
flex-basis: 22px;
|
||||
margin-right: 0.5rem;
|
||||
justify-self: center;
|
||||
|
||||
/* JavaScript-set numbers; default to 0 */
|
||||
--critical: 0;
|
||||
--important: 0;
|
||||
--moderate: 0;
|
||||
--low: 0;
|
||||
/* Add the numbers together, making calculations easier later on */
|
||||
--total: calc(var(--critical) + var(--important) + var(--moderate) + var(--low));
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--pf-global--BorderColor--200);
|
||||
/* Use flex here (with auto below) so everything always adds up properly */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
/* Inner gap between colors and border */
|
||||
padding: 1px;
|
||||
/* The top border offset is provided by the border of the first block */
|
||||
padding-top: 0;
|
||||
/* JavaScript-set numbers; default to 0 */
|
||||
--critical: 0;
|
||||
--important: 0;
|
||||
--moderate: 0;
|
||||
--low: 0;
|
||||
/* Add the numbers together, making calculations easier later on */
|
||||
--total: calc(var(--critical) + var(--important) + var(--moderate) + var(--low));
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--pf-global--BorderColor--200);
|
||||
/* Use flex here (with auto below) so everything always adds up properly */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
/* Inner gap between colors and border */
|
||||
padding: 1px;
|
||||
/* The top border offset is provided by the border of the first block */
|
||||
padding-top: 0;
|
||||
|
||||
> * {
|
||||
/* If there's a value, set to 1px. Otherwise, divide by 0 and it becomes invalid */
|
||||
--pixel-onoff: calc(var(--severity) / var(--severity) * 1px);
|
||||
/* Hit severity is mapped to the --servity variable in blocks below. */
|
||||
height: calc(var(--severity) / var(--total) * 100%);
|
||||
/* Make it stretchy so the math always works out. ("Fudge factor") */
|
||||
flex: auto;
|
||||
/* Anti-alias the edges ever-so-slightly */
|
||||
border-radius: 1px;
|
||||
/* If there's a value, then there's a gap at top */
|
||||
margin-top: var(--pixel-onoff);
|
||||
/* If there's a value, always round height up to 1px minimum */
|
||||
min-height: var(--pixel-onoff);
|
||||
}
|
||||
> * {
|
||||
/* If there's a value, set to 1px. Otherwise, divide by 0 and it becomes invalid */
|
||||
--pixel-onoff: calc(var(--severity) / var(--severity) * 1px);
|
||||
/* Hit severity is mapped to the --servity variable in blocks below. */
|
||||
height: calc(var(--severity) / var(--total) * 100%);
|
||||
/* Make it stretchy so the math always works out. ("Fudge factor") */
|
||||
flex: auto;
|
||||
/* Anti-alias the edges ever-so-slightly */
|
||||
border-radius: 1px;
|
||||
/* If there's a value, then there's a gap at top */
|
||||
margin-top: var(--pixel-onoff);
|
||||
/* If there's a value, always round height up to 1px minimum */
|
||||
min-height: var(--pixel-onoff);
|
||||
}
|
||||
|
||||
&-critical {
|
||||
--severity: var(--critical);
|
||||
background: #c9190b;
|
||||
}
|
||||
&-critical {
|
||||
--severity: var(--critical);
|
||||
background: #c9190b;
|
||||
}
|
||||
|
||||
&-important {
|
||||
--severity: var(--important);
|
||||
background: #ec7a08;
|
||||
}
|
||||
&-important {
|
||||
--severity: var(--important);
|
||||
background: #ec7a08;
|
||||
}
|
||||
|
||||
&-moderate {
|
||||
--severity: var(--moderate);
|
||||
background: #f0ab00;
|
||||
}
|
||||
&-moderate {
|
||||
--severity: var(--moderate);
|
||||
background: #f0ab00;
|
||||
}
|
||||
|
||||
&-low {
|
||||
--severity: var(--low);
|
||||
background: #d2d2d2;
|
||||
}
|
||||
&-low {
|
||||
--severity: var(--low);
|
||||
background: #d2d2d2;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,27 +2,27 @@
|
|||
@import "@patternfly/patternfly/utilities/Text/text.scss";
|
||||
|
||||
.system-information-failed-login-warning-icon {
|
||||
color: var(--pf-global--warning-color--100);
|
||||
color: var(--pf-global--warning-color--100);
|
||||
}
|
||||
|
||||
.system-information-failed-login-warning {
|
||||
color: var(--pf-global--warning-color--200);
|
||||
font-weight: bold;
|
||||
color: var(--pf-global--warning-color--200);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.system-information-failed-login-danger-icon {
|
||||
color: var(--pf-global--danger-color--100);
|
||||
color: var(--pf-global--danger-color--100);
|
||||
}
|
||||
|
||||
.system-information-failed-login-danger {
|
||||
color: var(--pf-global--danger-color--200);
|
||||
font-weight: bold;
|
||||
color: var(--pf-global--danger-color--200);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.system-information-last-login-icon {
|
||||
color: var(--pf-global--Color--200);
|
||||
color: var(--pf-global--Color--200);
|
||||
}
|
||||
|
||||
.ct-grey-text {
|
||||
color: var(--pf-global--Color--200);
|
||||
color: var(--pf-global--Color--200);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
#motd {
|
||||
--motd--font-size: var(--pf-global--FontSize--sm);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: var(--motd--font-size);
|
||||
// Account for the difference in font sizes, so the text lines up
|
||||
margin: calc(var(--pf-c-alert__title--FontSize) - var(--motd--font-size)) 0 0;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
--motd--font-size: var(--pf-global--FontSize--sm);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: var(--motd--font-size);
|
||||
// Account for the difference in font sizes, so the text lines up
|
||||
margin: calc(var(--pf-c-alert__title--FontSize) - var(--motd--font-size)) 0 0;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#motd-box {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.shutdown-status-poweroff-icon, .reboot-status-poweroff-icon {
|
||||
color: var(--pf-global--Color--200);
|
||||
color: var(--pf-global--Color--200);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
#system_machine_id {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
// Some browsers don't support anywhere yet, so we provide break-word as a fallback
|
||||
overflow-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
// WebKit & Blink browsers don't support overflow-wrap for non-words (yet?),
|
||||
// so use a nonstandard break-all in this special case
|
||||
word-break: break-all;
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
// Some browsers don't support anywhere yet, so we provide break-word as a fallback
|
||||
overflow-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
// WebKit & Blink browsers don't support overflow-wrap for non-words (yet?),
|
||||
// so use a nonstandard break-all in this special case
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.system-information {
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@
|
|||
padding-right: var(--pf-c-page__main-section--PaddingRight);
|
||||
|
||||
> .pf-c-alert__action {
|
||||
margin-right: 0;
|
||||
margin-left: var(--pf-global--spacer--md);
|
||||
margin-right: 0;
|
||||
margin-left: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
// Align left content with the rest of the page
|
||||
@media (min-width: $pf-global--breakpoint--xl) {
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
p {
|
||||
+ p,
|
||||
+ button {
|
||||
margin-top: calc(var(--pf-global--LineHeight--md) * 1rem);
|
||||
margin-top: calc(var(--pf-global--LineHeight--md) * 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -263,5 +263,5 @@
|
|||
}
|
||||
|
||||
.pf-c-alert .pf-c-alert__description a {
|
||||
padding-left: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.page-status-bug-icon {
|
||||
color: var(--pf-global--Color--200);
|
||||
color: var(--pf-global--Color--200);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use "../lib/ct-card.scss";
|
||||
|
||||
#log-details .pf-c-card {
|
||||
@extend .ct-card;
|
||||
@extend .ct-card;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@
|
|||
@use "_global-variables.scss";
|
||||
|
||||
#service-details .pf-l-gallery {
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
}
|
||||
|
||||
#service-details .pf-c-page__main-breadcrumb {
|
||||
padding: var(--pf-global--gutter);
|
||||
padding: var(--pf-global--gutter);
|
||||
}
|
||||
|
||||
#service-details .pf-c-card {
|
||||
@extend .ct-card;
|
||||
@extend .ct-card;
|
||||
}
|
||||
|
||||
#service-details .pf-c-expandable-section {
|
||||
margin-top: var(--pf-global--spacer--md);
|
||||
margin-top: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.comma-list {
|
||||
|
|
@ -34,68 +34,68 @@
|
|||
}
|
||||
|
||||
.service-top-panel {
|
||||
padding-bottom: 1.25rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding-bottom: 1.25rem;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.service-top-panel > .service-name {
|
||||
margin: 0 0.75rem 0 0;
|
||||
margin: 0 0.75rem 0 0;
|
||||
}
|
||||
|
||||
.service-top-panel .pf-c-switch {
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 0 0 0.75rem;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.service-top-panel > .service-thumbtack-icon {
|
||||
color: var(--pf-global--icon--Color--light);
|
||||
margin: 0 0.5rem 0 0;
|
||||
color: var(--pf-global--icon--Color--light);
|
||||
margin: 0 0.5rem 0 0;
|
||||
}
|
||||
|
||||
/* Make the kebab wrapper flex to parents for proper alignment */
|
||||
.service-top-panel .pf-c-dropdown {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
margin-left: 2rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.status-icon::before {
|
||||
color: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
margin-right: 0.5rem;
|
||||
color: var(--pf-global--icon--Color--light);
|
||||
margin-right: 0.5rem;
|
||||
color: var(--pf-global--icon--Color--light);
|
||||
}
|
||||
|
||||
.status-running > .status-icon,
|
||||
.status-enabled > .status-icon {
|
||||
/* mid-way between PF4 success-100 & 200; then rounded to AA contrast */
|
||||
color: #6da000;
|
||||
/* mid-way between PF4 success-100 & 200; then rounded to AA contrast */
|
||||
color: #6da000;
|
||||
}
|
||||
|
||||
.status-failed > .status-icon,
|
||||
.status-failed > .status,
|
||||
.control-label.failed {
|
||||
color: var(--pf-global--danger-color--200);
|
||||
color: var(--pf-global--danger-color--200);
|
||||
}
|
||||
|
||||
.side-note {
|
||||
color: var(--pf-global--Color--300);
|
||||
padding-left: 1em;
|
||||
color: var(--pf-global--Color--300);
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.font-xs {
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
}
|
||||
|
||||
.pf-c-dropdown__menu-item.pf-m-danger {
|
||||
color: var(--pf-global--danger-color--200);
|
||||
color: var(--pf-global--danger-color--200);
|
||||
}
|
||||
|
||||
.pf-c-alert.pf-m-inline.pf-m-danger {
|
||||
margin-bottom: var(--pf-global--spacer--sm);
|
||||
margin-bottom: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,98 +6,98 @@
|
|||
// However, the toolbar also lacks a border and is sticky, so add a bottom
|
||||
// border to the toolbar to separate the toolbar and list.
|
||||
.services-toolbar {
|
||||
border-bottom: 1px solid var(--pf-global--BorderColor--100);
|
||||
border-bottom: 1px solid var(--pf-global--BorderColor--100);
|
||||
}
|
||||
|
||||
// Magic pixie dust to make the list a bit faster and more furious
|
||||
.services-list tbody {
|
||||
// Skip a lot of computations
|
||||
contain: content;
|
||||
// Skip a lot of computations
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.service-unit-failed {
|
||||
background-color: var(--ct-color-list-critical-bg);
|
||||
background-color: var(--ct-color-list-critical-bg);
|
||||
|
||||
.service-unit-status {
|
||||
color: var(--ct-color-list-critical-alert-text);
|
||||
}
|
||||
.service-unit-status {
|
||||
color: var(--ct-color-list-critical-alert-text);
|
||||
}
|
||||
}
|
||||
|
||||
.service-unit-status {
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
|
||||
&-failed {
|
||||
color: red;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
&-failed {
|
||||
color: red;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
&-flex-container {
|
||||
--pf-l-flex--FlexWrap: nowrap;
|
||||
}
|
||||
&-flex-container {
|
||||
--pf-l-flex--FlexWrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.service-unit-file-state {
|
||||
display: inline-block;
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
min-width: 5rem;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
min-width: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service-unit-file-state:not(.pf-c-badge) {
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
text-align: center;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
// Add some spacing between the tab label and the icon
|
||||
.pf-c-nav__link > .ct-exclamation-circle {
|
||||
margin-left: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.services-header.pf-c-page__main-nav {
|
||||
padding-bottom: 1rem;
|
||||
padding-right: 0;
|
||||
padding-bottom: 1rem;
|
||||
padding-right: 0;
|
||||
|
||||
> .pf-l-flex {
|
||||
// Add spacing between the tabs and the 'Create timer' button in mobile
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
// Align 'Create timer' button with the right side of the services list card
|
||||
margin-right: var(--pf-c-page__main-section--PaddingRight);
|
||||
}
|
||||
> .pf-l-flex {
|
||||
// Add spacing between the tabs and the 'Create timer' button in mobile
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
// Align 'Create timer' button with the right side of the services list card
|
||||
margin-right: var(--pf-c-page__main-section--PaddingRight);
|
||||
}
|
||||
}
|
||||
|
||||
// Add some spacing between the icon and the status string in the list
|
||||
.service-unit-status-failed > .ct-exclamation-circle {
|
||||
margin-right: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.service-unit-first-column {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(5rem, 25rem));
|
||||
grid-gap: var(--pf-global--spacer--sm);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(5rem, 25rem));
|
||||
grid-gap: var(--pf-global--spacer--sm);
|
||||
|
||||
.service-unit-description {
|
||||
font-weight: bold;
|
||||
}
|
||||
.service-unit-description {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.service-thumbtack-icon-color {
|
||||
color: var(--pf-global--icon--Color--light);
|
||||
color: var(--pf-global--icon--Color--light);
|
||||
}
|
||||
|
||||
.pf-c-table .pf-c-table__action.service-unit-second-column {
|
||||
--pf-c-table--cell--Width: 20%;
|
||||
--pf-c-table--cell--Width: 20%;
|
||||
|
||||
&-flex-container {
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
}
|
||||
&-flex-container {
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
}
|
||||
}
|
||||
|
||||
// Don't show labels from mobile mode
|
||||
.pf-m-grid-md.pf-c-table [data-label]::before {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pf-m-grid-md.pf-c-table [data-label] {
|
||||
display: revert;
|
||||
display: revert;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
.timer-dialog {
|
||||
// Limit the width of the components so that they fit in a single row
|
||||
.pf-c-date-picker:not(.create-timer-time-picker), select {
|
||||
width: 10rem;
|
||||
max-width: 10rem;
|
||||
}
|
||||
// Limit the width of the components so that they fit in a single row
|
||||
.pf-c-date-picker:not(.create-timer-time-picker), select {
|
||||
width: 10rem;
|
||||
max-width: 10rem;
|
||||
}
|
||||
|
||||
.create-timer-time-picker, .delay-number {
|
||||
width: 6rem;
|
||||
}
|
||||
.create-timer-time-picker, .delay-number {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.specific-repeat-group, .delay-group {
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
}
|
||||
.specific-repeat-group, .delay-group {
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,39 @@
|
|||
@use "page";
|
||||
|
||||
.ct-check-circle {
|
||||
color: var(--pf-global--success-color--100);
|
||||
color: var(--pf-global--success-color--100);
|
||||
}
|
||||
|
||||
.ct-info-circle {
|
||||
color: var(--pf-global--info-color--100);
|
||||
color: var(--pf-global--info-color--100);
|
||||
}
|
||||
|
||||
.ct-exclamation-triangle {
|
||||
color: var(--pf-global--warning-color--100);
|
||||
color: var(--pf-global--warning-color--100);
|
||||
}
|
||||
|
||||
.ct-exclamation-circle {
|
||||
color: var(--pf-global--danger-color--100);
|
||||
color: var(--pf-global--danger-color--100);
|
||||
}
|
||||
|
||||
.nav-tabs-pf > li:first-child > a {
|
||||
padding-left: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.nav li a {
|
||||
font-size: 13px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Extra content header */
|
||||
|
||||
a.disabled {
|
||||
text-decoration: none;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
color: var(--ct-color-text);
|
||||
text-decoration: none;
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
color: var(--ct-color-text);
|
||||
}
|
||||
|
||||
.popover {
|
||||
max-width: none;
|
||||
white-space: nowrap;
|
||||
max-width: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,81 +4,81 @@
|
|||
@import "@patternfly/patternfly/components/Toolbar/toolbar.scss";
|
||||
|
||||
.console-ct-container {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.console-ct-container .terminal-body,
|
||||
.console-ct-container .console-ct {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.console-ct-container .terminal-group {
|
||||
border-bottom: 1px solid var(--ct-color-border);
|
||||
border-bottom: 1px solid var(--ct-color-border);
|
||||
}
|
||||
|
||||
.xterm-accessibility {
|
||||
/* Allow for scrollbar clicking */
|
||||
/* (scrollbars are 18px or less across common OSes) */
|
||||
right: 18px !important;
|
||||
/* Allow for scrollbar clicking */
|
||||
/* (scrollbars are 18px or less across common OSes) */
|
||||
right: 18px !important;
|
||||
}
|
||||
|
||||
.console-ct-container .terminal-body {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.console-ct-container .console-ct {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.black-theme {
|
||||
background-color: #000;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.dark-theme {
|
||||
background-color: #002b36;
|
||||
background-color: #002b36;
|
||||
}
|
||||
|
||||
.light-theme {
|
||||
background-color: #fdf6e3;
|
||||
background-color: #fdf6e3;
|
||||
}
|
||||
|
||||
.white-theme {
|
||||
background-color: #fff;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.terminal-group {
|
||||
display: flex;
|
||||
row-gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
row-gap: 0.5rem;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
|
||||
/* Move the padding handling to the container element outside of the toolbar */
|
||||
padding: var(--pf-global--spacer--md);
|
||||
/* Move the padding handling to the container element outside of the toolbar */
|
||||
padding: var(--pf-global--spacer--md);
|
||||
|
||||
> .pf-c-toolbar {
|
||||
padding: 0;
|
||||
> .pf-c-toolbar {
|
||||
padding: 0;
|
||||
|
||||
> .pf-c-toolbar__content {
|
||||
padding: 0;
|
||||
> .pf-c-toolbar__content {
|
||||
padding: 0;
|
||||
|
||||
select {
|
||||
min-width: 5rem;
|
||||
}
|
||||
}
|
||||
padding: 0;
|
||||
select {
|
||||
min-width: 5rem;
|
||||
}
|
||||
}
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// HACK for https://forum.patternfly.org/t/read-only-number-input/422
|
||||
.font-size .pf-c-form-control[readonly] {
|
||||
cursor: default;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,215 +7,215 @@
|
|||
@import "@patternfly/patternfly/components/DataList/data-list.scss";
|
||||
|
||||
#account .pf-c-card {
|
||||
@extend .ct-card;
|
||||
@extend .ct-card;
|
||||
}
|
||||
|
||||
.account-details .pf-c-card__header {
|
||||
margin-bottom: var(--pf-global--spacer--lg);
|
||||
margin-bottom: var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
#account {
|
||||
--pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--PaddingTop);
|
||||
--pf-c-page__main-breadcrumb--PaddingBottom: var(--pf-c-page__main-breadcrumb--PaddingTop);
|
||||
}
|
||||
|
||||
#account .pf-l-gallery {
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
--pf-l-gallery--GridTemplateColumns: 1fr;
|
||||
}
|
||||
|
||||
#account .pf-c-page__main-section,
|
||||
#account .pf-c-page__main-nav {
|
||||
padding: var(--pf-global--gutter);
|
||||
padding: var(--pf-global--gutter);
|
||||
}
|
||||
|
||||
#accounts-list {
|
||||
--ct-account-pic-size: 3rem;
|
||||
--ct-account-pic-size: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
#accounts-list {
|
||||
--ct-account-pic-size: 0;
|
||||
}
|
||||
#accounts-list {
|
||||
--ct-account-pic-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cockpit-account {
|
||||
display: grid;
|
||||
grid-template-areas: "pic name"
|
||||
"pic account";
|
||||
grid-template-columns: var(--ct-account-pic-size) 1fr;
|
||||
grid-gap: 0 0.25rem;
|
||||
min-height: 4rem;
|
||||
padding: 0.5rem;
|
||||
display: grid;
|
||||
grid-template-areas: "pic name"
|
||||
"pic account";
|
||||
grid-template-columns: var(--ct-account-pic-size) 1fr;
|
||||
grid-gap: 0 0.25rem;
|
||||
min-height: 4rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.cockpit-account > .cockpit-account-pic {
|
||||
font-size: var(--ct-account-pic-size);
|
||||
color: #bebebe;
|
||||
grid-area: pic;
|
||||
font-size: var(--ct-account-pic-size);
|
||||
color: #bebebe;
|
||||
grid-area: pic;
|
||||
}
|
||||
|
||||
.cockpit-account > .cockpit-account-real-name {
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
grid-area: name;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
grid-area: name;
|
||||
}
|
||||
|
||||
.cockpit-account > .cockpit-account-user-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
grid-area: account;
|
||||
outline: none;
|
||||
align-self: end;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
grid-area: account;
|
||||
outline: none;
|
||||
align-self: end;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
> a {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
> a {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#account-details div.checkbox:first-child {
|
||||
margin-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#account-details div.checkbox:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#account-pic {
|
||||
background: #d3d7cf;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background: #d3d7cf;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#account-authorized-keys {
|
||||
.pf-c-data-list__item {
|
||||
// Align text with heading
|
||||
--pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--lg);
|
||||
.pf-c-data-list__item {
|
||||
// Align text with heading
|
||||
--pf-c-data-list__item-row--PaddingLeft: var(--pf-global--spacer--lg);
|
||||
|
||||
// Align - buttons with + button
|
||||
--pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
|
||||
// Align - buttons with + button
|
||||
--pf-c-data-list__item-row--PaddingRight: var(--pf-global--spacer--md);
|
||||
|
||||
// Add a border to the top item
|
||||
&:first-child {
|
||||
border-top: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
|
||||
}
|
||||
|
||||
// Remove a border from the bottom item
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
// Add a border to the top item
|
||||
&:first-child {
|
||||
border-top: var(--pf-c-data-list__item--BorderBottomWidth) solid var(--pf-c-data-list__item--BorderBottomColor);
|
||||
}
|
||||
|
||||
.pf-c-data-list__cell {
|
||||
// Align to center (when stretched wide)
|
||||
align-self: center;
|
||||
// Allow cells to be wrappable
|
||||
overflow-wrap: anywhere;
|
||||
// Remove a border from the bottom item
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Comment is user@hostname
|
||||
&.comment {
|
||||
// Grow, shrink, and try to be around 12rem (or more or less)
|
||||
flex: 1 1 10rem;
|
||||
}
|
||||
.pf-c-data-list__cell {
|
||||
// Align to center (when stretched wide)
|
||||
align-self: center;
|
||||
// Allow cells to be wrappable
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
&.fingerprint {
|
||||
// Grow more, shrink, and try to be around 20rem (or more or less)
|
||||
flex: 100 1 50%;
|
||||
}
|
||||
// Comment is user@hostname
|
||||
&.comment {
|
||||
// Grow, shrink, and try to be around 12rem (or more or less)
|
||||
flex: 1 1 10rem;
|
||||
}
|
||||
|
||||
// Handle empty state
|
||||
.no-keys {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: var(--pf-global--spacer--lg);
|
||||
&.fingerprint {
|
||||
// Grow more, shrink, and try to be around 20rem (or more or less)
|
||||
flex: 100 1 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Handle empty state
|
||||
.no-keys {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Use subgrid to properly align items, making the list act like a table */
|
||||
@supports (grid-template-columns: subgrid) {
|
||||
@media screen and (min-width: 512px) {
|
||||
#account-authorized-keys-list {
|
||||
display: grid;
|
||||
// This template will apply to the subgrids too
|
||||
grid-template-columns: minmax(8rem, auto) minmax(33%, 1fr) auto;
|
||||
@media screen and (min-width: 512px) {
|
||||
#account-authorized-keys-list {
|
||||
display: grid;
|
||||
// This template will apply to the subgrids too
|
||||
grid-template-columns: minmax(8rem, auto) minmax(33%, 1fr) auto;
|
||||
|
||||
/* Bring the grid through all the children */
|
||||
.pf-c-data-list__item,
|
||||
.pf-c-data-list__item-row:not(.no-keys),
|
||||
.pf-c-data-list__item-content {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
/* Bring the grid through all the children */
|
||||
.pf-c-data-list__item,
|
||||
.pf-c-data-list__item-row:not(.no-keys),
|
||||
.pf-c-data-list__item-content {
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
}
|
||||
|
||||
/* Align children across all the grid */
|
||||
.pf-c-data-list__item,
|
||||
.pf-c-data-list__item-row {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
/* Align children across all the grid */
|
||||
.pf-c-data-list__item,
|
||||
.pf-c-data-list__item-row {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Put the wrapper for the items on the first two grid cells (leaving the actions on the third) */
|
||||
.pf-c-data-list__item-content {
|
||||
grid-column: 1 / -2;
|
||||
}
|
||||
/* Put the wrapper for the items on the first two grid cells (leaving the actions on the third) */
|
||||
.pf-c-data-list__item-content {
|
||||
grid-column: 1 / -2;
|
||||
}
|
||||
|
||||
/* Place comment and fingerprint on their cells */
|
||||
.pf-c-data-list__cell {
|
||||
&.comment {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
&.fingerprint {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
/* Place comment and fingerprint on their cells */
|
||||
.pf-c-data-list__cell {
|
||||
&.comment {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
&.fingerprint {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#account-authorized-keys-list {
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
vertical-align: top;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.size-text-ct {
|
||||
display: inline;
|
||||
width: 8em;
|
||||
text-align: left;
|
||||
margin: 2px;
|
||||
display: inline;
|
||||
width: 8em;
|
||||
text-align: left;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.modal-sm-ct {
|
||||
width: 32rem;
|
||||
}
|
||||
.modal-sm-ct {
|
||||
width: 32rem;
|
||||
}
|
||||
}
|
||||
|
||||
.account-column-one {
|
||||
min-width: 270px;
|
||||
display: inline-block;
|
||||
min-width: 270px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.expiration-modal .pf-c-form__group-control {
|
||||
.pf-c-radio:first-child {
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
}
|
||||
// Work around for https://github.com/patternfly/patternfly/issues/4061
|
||||
.pf-c-radio:nth-child(2) input {
|
||||
align-self: center;
|
||||
}
|
||||
.pf-c-radio:first-child {
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
}
|
||||
// Work around for https://github.com/patternfly/patternfly/issues/4061
|
||||
.pf-c-radio:nth-child(2) input {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.help-block {
|
||||
white-space: pre-wrap;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.outline-question-circle-icon {
|
||||
margin-left: var(--pf-global--spacer--sm);
|
||||
margin-left: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue